角度指令的父作用域未更新UI

Parent scope of angular directive not updating UI

本文关键字：更新 UI 作用域 指令      更新时间：2023-10-19

这是我的小提琴

http://jsfiddle.net/3jos4pLb/

我的问题是，你可以看到我的指令通过设置finalValue与我的父控制器作用域进行通信，但当触发窗口调整大小时，作用域.finalValue会通过查看console.log进行更新，但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();
            })
        }
    }
}])

您正在使用jql绑定resize事件。jql是非常低级的，它直接将处理程序函数绑定到元素，绕过了正常的角度脏检查。为了让angular知道非angular事件处理程序，您需要调用scope$apply（），让angular知道它需要运行一个摘要循环。

相关文章：