angularjs $apply


$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如,假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时,就必须使用$apply()。

简而言之,使用$scope.$apply()时可以从外部进入上下文。如果在事件被触发时调用$apply(),就会使用Angular事件循环来运行它。如果没有调用$apply(),就不会在事件循环内执行这个函数,而它会运行在Angular上下文外部

何时使用$apply

通常可以依赖于Angular提供的可用于视图中的任意指令来调用$apply()。所有ng-[event]

指令(比如ng-click、ng-keypress)都会调用$apply()。

此外还可以依赖于一系列Angular内置的服务来调用$digest()。比如$http服务会在XHR请求完成并触发更新返回值(promise)之后调用$apply()。

无论何时我们手动处理事件,使用第三方框架(比如jQuery、Facebook API),或者调用setTimeout(),都可以使用$apply()函数让Angular返回$digest循环。

当我们将jQuery和Angular集成在一起时(这通常被视为一个肮脏的行为),就需要使用$apply(),因为Angular不会察觉到执行在Angular上下文外部的事件。例如,在使用jQuery插件时(比如datepicker),就需要使用$apply()将来自jQuery的值传递到Angular应用中

在这里,我们构建了一个简单的指令(第10章深入探索了如何构建指令),指令中我们在元素上使用了datepicker这个jQuery插件方法。

datepicker插件暴露了一个onSelect事件,这个事件会在用户选择日期时触发。为了在Angular应用内部获取用户选择的日期,我们需要在$apply()函数内运行datepicker的回调函数

app.directive('myDatepicker', function () {
    return function (scope, ele, attrs, ctrl) {
        $(function () {
// 在元素上调用datepicker方法
            ele.datepicker({
                dateFormat: 'mm/dd/yy',
                onSelect: function (date) {
                    scope.$apply(function () {
                        ctrl.$setViewValue(date);
                    });
                }
            });
        });
    }
});

一般不建议在控制器中使用$apply(),因为这样会导致难以测试,而且如果不得不在控制器中使用$apply()或者$digest(),很可能让事情变得更加难以理解

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM