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>
    
  • 相关阅读:
    八、Docker+RabbitMQ
    Spring.Net学习笔记一(IOC第一个实例)
    快速搞懂 SQL Server 的锁定和阻塞
    JQuery.Ajax()的data参数类型
    常用开源介绍
    AutoMapper简明教程(学习笔记)
    面向.Net程序员的前端优化
    --数组元素插入有两种方式
    JQuery源码分析-02正则表达式-RegExp-常用正则表达式
    关于ASP.NET MVC的Filter小记
  • 原文地址:https://www.cnblogs.com/bluefantasy728/p/5858481.html
Copyright © 2011-2022 走看看