• 第4章 作用域


    视图和$scope的世界

      AngularJS启动后并生成视图,会将ng-app同$rootScope进行绑定。$rootScope是所有$scope对象的顶层。相当于某一个ng-app的全局作用域。$scope对象只充当数据模型,不作处理和操作数据。

      以下为$rootScope的例子:

      

    <!doctype html>
    <html>
    
        <head>
            <script src="angularJs/1.2.13/angular.js"></script>
        </head>
    
        <body ng-app="myApp">
            <div>
                hello {{name}}
            </div>
    
        </body>
        <script>
            var app = angular.module('myApp', []).run(function($rootScope){
                $rootScope.name="world";
            });
        </script>
    </html>

      上面的的例子在$rootScope中设置了一个name变量,并引用了它。为了避免污染全局命名空间,可以用控制器显式的创建一个隔离的$scope对象,再将变量设置到这个子变量上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上。如下:

      

    <!doctype html>
    <html>
    
        <head>
            <script src="angularJs/1.2.13/angular.js"></script>
        </head>
    
        <body ng-app="myApp">
            <div ng-controller="MyController">
                hello {{name}}
            </div>
    
        </body>
        <script>
            var app = angular.module('myApp', []);
            app.controller("MyController",function($scope){
                $scope.name="Ari";
            })
        </script>
    </html>

    $scope的生命周期

      1.创建

      创建控制器或指令时,$injector创建一个新的作用域,并在这个新的控制器或指令运行时将作用域传进去。

       2.链接

       当Angular开始运行时,所有的$scope对象都会附加到视图中。

       3.更新

       当事件循环运行时,通常执行顶层$scope对象,每个子作用域执行自己的脏值检测。检测到变换,就会触发指定的回调函数。

      4.销毁

    指令和作用域

      指令通常不会创建自己的作用域,但ng-controller和ng-repeat指令会创建自己的作用域。

  • 相关阅读:
    怎样设置HTML上传控件,上传文件的大小
    在winform里怎么调用WebBrowser控件里的脚本
    可输入的DropDownList控件
    javascript + DIV +CSS 实现可拖动消息窗体
    又是一周的开始
    document.execCommand() 解析
    怎样将DataGrid的列值统计并显示在页脚
    如何添加在线QQ咨询?
    徐普~~~~个性语言堪称经典~~~~
    软键盘的实现
  • 原文地址:https://www.cnblogs.com/wuchaodzxx/p/5618134.html
Copyright © 2020-2023  润新知