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

Question

AngularJS $范围。$ 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();
                })
            }
        };
    });

Answer 1

使用$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 Developer Guide - Integration with the browser event loop。