蓝色幻想728

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  • $scope.$apply()方法可以强制$apply()里运行的函数所改变的model里的数据直接反应到view里,因为在angular的环境中,有时会用到原生js或者jquery的时候,这些行为有时无法实现angular里的双向绑定机制,需要手动调用$scope.$apply(),将这个行为(函数调用)外面包一层$scope.$apply()。其实angular实现双向绑定的机制其实就是在内部添加的监视$watch,然后自动调用了$scope.$apply(),只是我们在用原生js或者jq的时候让angular强制使用一次。

关于$apply()的具体原理和用法在下面这个地址有详细介绍,是翻译国外的文章的:
http://blog.csdn.net/dm_vincent/article/details/38705099

比如,下面这个写法用了原生的setTimout(),其实是不起作用的,尽管name的值在2.5秒后改成了hi,但是并没有在view层显示出改变

var app = angular.module('myApp',[]);
app.controller('cont1',['$scope',function($scope){
    $scope.name = 'hello';
    setTimeout(function(){
        $scope.name = 'hi';
    },2500);
}]);

有2中办法可以解决。
方法一:注入angular自带的$timeout,并代替原生setTimeout

var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$timeout',function($scope,$timeout){  //注意这里要把$timeout注入参数里,并且写在数组前列
    $scope.name = 'hello';
    $timeout(function(){
        $scope.name = 'hi';
    },2500);
}]);

方法二:在setTimeout函数内部强制调用$scope.$apply()

app.controller('cont1',['$scope',function($scope){
    $scope.name = 'hello';
    setTimeout(function(){
        $scope.$apply(function(){
            $scope.name = 'hi';
        });
    },2500);
}]);

模块对象的run()方法使用,可以在不定义controller的情况下,在模块对象下直接在全局$rootScope下挂在变量,

var app = angular.module('myApp',[]);
app.run(['$rootScope',function($rootScope){  //这里注意写法,run()方法里是一个数组
    $rootScope.name = 'hello';
}]);

<body>
{{name}} <!--这时的name是在全局环境下的name了,而并没有创建任何控制器-->
</body>
posted on 2016-09-10 00:03  蓝色幻想728  阅读(232)  评论(0编辑  收藏  举报