角度指令的父范圍不更新UI

Question

這是我的小提琴

http://jsfiddle.net/3jos4pLb/

我的問題是您可以通過設置finalValue看到我的指令正在與我的父控制器范圍進行通信，但是，當觸發窗口調整大小時，該范圍將通過查看console.log來更新finalValue，但是UI不會反映此更新。 我試圖能夠使此不斷更新窗口大小調整。 換句話說，該指令在第一次加載時成功將scope.finalValue傳遞給父控制器，該設置會覆蓋設置值5（新值是窗口的高度）。 但是，盡管我在控制台中看到scope.finalValue更改值，但我調整大小時，UI並未更新。

var app=angular.module('App', []);

app.controller("Ctrl1", function($scope){
    $scope.finalValue = 5;
});
app.directive('elheightresize', ['$window', function($window) {
    return {
    restrict: "EA",
    scope: false,
        link: function(scope, elem, attrs) {
            scope.onResize = function() {
                    scope.finalValue = $window.innerHeight;
                console.log(scope.finalValue);
               // var header = document.getElementsByTagName('header')[0];
               // elem.windowHeight = $window.innerHeight - header.clientHeight;
               // $(elem).height(elem.windowHeight);
            }
            scope.onResize();

            angular.element($window).bind('resize', function() {
                scope.onResize();
            })
        }
    }
}])

Answer 1

您正在使用jql綁定resize事件。 jql是非常低級的，它直接將處理程序函數綁定到元素，從而繞過正常的角度臟檢查。 為了使角度知道非角度事件處理程序，您需要在事件處理程序中調用scope。$ apply（），以便讓角度知道它需要運行摘要循環。