时间戳

首页 > 解决方案 > AngularJS 自定义事件指令不更新布局

angularjs - AngularJS 自定义事件指令不更新布局

问题描述

AngularJS $scope.$eval 不更新布局

我正在使用 AngularJs $scope.$eval 来动态执行函数。发现 $scope 的值是更新的，而布局没有更新。

    testApp.directive("click", function(){
        return {
            link: function($scope, $element, $attr){
                $element.bind("click", function(event){
                    $scope.$eval($attr.click);
                })
            }
        };
    }); 

    testApp.controller('TestController', function TestController($scope) {
        $scope.add = function(){
            $scope.filteredData = [
            {
                'name' : 'name 1',
                'value' : 'value 1'
            }, 
            {
                'name' : 'name 2',
                'value' : 'value 2'
            }
           ];
            $scope.filteredData.push(
                {
                    'name' : 'name 2',
                    'value' : 'value 2'
                }
            );
        };
    });

如果我尝试添加 $scope.$apply()。布局将根据 $scope 值进行更新。

    testApp.directive("click", function(){
        return {
            link: function($scope, $element, $attr){
                $element.bind("click", function(event){
                    $scope.$eval($attr.click);
                    $scope.$apply();
                })
            }
        };
    });

标签： angularjsangularjs-directive

解决方案

使用$apply：

testApp.directive("click", function(){
    return {
        link: function(scope, element, attr){
            element.on("click", function(event){
                scope.$eval(attr.click);
                scope.$apply();
            })
        }
    };
});

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等……您还可以使用$apply()从 JavaScript 进入 AngularJS 执行上下文。

请记住，在大多数地方（控制器、服务），处理事件的指令已经为您调用了 $apply。$apply仅在实现自定义事件回调或使用第三方库回调时才需要显式调用。

有关更多信息，请参阅AngularJS 开发人员指南 - 与浏览器事件循环集成。

推荐阅读