zoukankan      html  css  js  c++  java
  • 【学】AngularJS日记(3)- $apply(), run()方法

    • $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>
    
  • 相关阅读:
    小李子和他的水枪
    尼布尔的祈祷文
    牢骚太盛防肠断,风物长宜放眼量。
    常见浏览器userAgent请求头信息
    微信浏览器点击事件不生效怎么解决?
    2019上半年软件设计师上午考试真题
    360浏览器断网广告怎么去?
    谷歌浏览器打开一个新页面时使用新的标签
    Deep Learning in Bioinformatics
    TensorFlow Playground
  • 原文地址:https://www.cnblogs.com/bluefantasy728/p/5858481.html
Copyright © 2011-2022 走看看