zoukankan      html  css  js  c++  java
  • 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 向其父作用域以及兄弟作用域传递数据。(若子作用域默认有数据绑定,则不会受其他作用域影响)

  • 相关阅读:
    Qt获取程序工作目录或某路径下所有的图片或指定格式的文件
    QGraphicsView Class
    自动白平衡---灰度世界算法
    Gamma校正算法原理及实现
    QWidget,QTableWidget删除(delete)动态添加(new)的子控件释放内存
    [转]【OpenCV】OpenCV中GPU模块使用
    php之trait 个人笔记
    git 本地忽略某些个文件
    bootstrop-datatime参数配置
    mysql 一次性插入上万条数据测试专用
  • 原文地址:https://www.cnblogs.com/hehheai/p/6506790.html
Copyright © 2011-2022 走看看