指令中的角度观察元素高度

Question

我正在尝试做这样的事情：

index.html

<div ng-controller="MyController" menu>
    <input ng-model="myVar"/>
    <div slimscroll="{'height':menuheight,'alwaysVisible':true}">
        <div id="menucontent" menu-content>
        </div>
    </div>
</div>

当输入字段中有文本时，它将对menu-content指令进行过滤。当它过滤时，menu-content 的高度会发生变化。

菜单指令：

angular.directive('menu', function(){
    return function (scope, element) {
        var menuContentHeight = $("#menucontent").height();
        scope.menuContentHeight = function(){
            return $("#menucontent").height();
        };

        scope.$watch(scope.menuContentHeight, function(newValue, oldValue) {
            if (newValue !== oldValue) {
                console.log('Changed!');
                menuContentHeight = newValue;
                adjustHeight();
            }
        },true);

        function adjustHeight(){
            // Perform height adjustment
        }
    };
});

所以，我想做的是使用scope.watch 来监控高度变化并进行更新。我的代码确实有效，但问题是它不会立即更新。

如何在高度改变后立即获得高度调整更新？

Answer 1

使用 $scope.apply()

scope.$watch(scope.menuContentHeight, function(newValue, oldValue) {
            if (newValue !== oldValue) {
                console.log('Changed!');
                menuContentHeight = newValue;
                adjustHeight();
                $scope.apply();  //call digest cycle
            }
        },true);

它可能对你有帮助......