• Angular作用域的层级概念(scope)


    首先引入 angular 的根作用域:$rootScope

    ng-app:定义了angualr的作用域

    ng-controller:定义了控制器

    scopescope便scope定义了视图与控制器之间的纽带,而scope本身是垂直继承的,当子作用域没有定义,便会找父作用域,逐层往上找直到根作用域rootScope.

    没有定义控制器的元素对应的即是根作用域,如下(<div>{{msg}}</div>)

    看下面代码,当我们点击parent控制器时,发现其子控制器内容会跟着变化,而父控制器以及根作用域绑定的元素内容没有变化(msg默认在各作用域都没有定义,因此继承根作用域的msg="Hello KiTy"):

    复制代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     7     <title>test</title>
     8 </head>
     9 <body ng-app = "myApp">
    10     <div>{{msg}}</div>
    11     <div ng-controller="parent" ng-click="change()">{{msg}}
    12         <div ng-controller="child">{{msg}}</div>
    13         <div ng-controller="child1" ng-click="change1()">{{msg}}</div>
    14         <div ng-controller="child2">{{msg}}</div>
    15     </div>
    16 <script src="angular.js"></script>
    17 <script>
    18 
    19     var app = angular.module('myApp', []);
    20     app.run(function($rootScope){          //run方法根作用域$rootScope的方法,因其没有控制器,不能用controller方法
    21         var msg = "Hello KiTy"
    22         $rootScope.msg = msg;
    23     })
    24     app.controller("parent", function($scope){
    25         $scope.change = function(){
    26              $scope.msg = "lol";
    27         }
    28     })
    29     app.controller("child", function($scope){
    30             
    31     })
    32     app.controller("child1", function($scope){
    33         
    34     })
    35     app.controller("child2", function($scope){
    36             
    37     })
    38 </script>
    39 </body>
    40 </html>
    复制代码

    由上不难发现scope是垂直继承,且是单向由上当下的,即父作用域不会继承子作用域数据绑定的值

    若想通过子作用域传递其数据到父作用域可以在子控制器函数中加以下代码:

    方法一:

    1 app.controller("parent", function($scope,$rootScope){
    2         console.log($scope)
    3         $scope.change = function(){
    4             $rootScope.msg = "lol";
    5         }
    6     })

    方法二:

    1 app.controller("parent", function($scope){
    2         console.log($scope)
    3         $scope.change = function(){
    4             $scope.$parent.msg = "lol";
    5         }
    6     })

    那么找个parentconsole.log(parent怎么来的?答案:console.log(scope);控制台输出$scope后找到的,意为其父作用域

    当然了我们还发现了兄弟作用域

    prevSiblingprevSibling、

    nextSibling,可以通过这两项来改变兄弟作用域内数据,意为前一个兄弟、后一个兄弟

    代码:

    复制代码
    1 app.controller("child1", function($scope){
    2         console.log($scope);
    3         $scope.change1 = function(){
    4              $scope.$$prevSibling.msg = "lol";
    5         $scope.$$nextSibling.msg = "lol"; 6 } 7 })
    复制代码

    通过以上分析我们发现作用域层级关系就像DOM树型机构,一 一对应,有根作用域 rootScope,rootScope,子作用域scope ,每一个子作用域有其兄弟作用域

    可通过 parent;parent;prevsibling;prevsibling;$nextSibling 向其父作用域以及兄弟作用域传递数据。(若子作用域默认有数据绑定,则不会受其他作用域影响)

  • 相关阅读:
    从多渠道打包与友盟统计有这一篇就够了
    多渠道打包
    studio构建错误Element uses-permission#android.permission.ACCESS_NETWORK_STATE at AndroidManifest.xml:38:5-79 dupli
    ADB命令与monkey
    正则表达式和文本挖掘(Text Mining)
    一步一步教你使用Git
    Android常见开源解决方案
    Android Intent到底能做些什么
    支付宝集成
    Theano 学习三 conv2d
  • 原文地址:https://www.cnblogs.com/hehheai/p/6506790.html
Copyright © 2020-2023  润新知