美文网首页
AngularJS_scope嵌套原型链与方法

AngularJS_scope嵌套原型链与方法

作者: Shokka | 来源:发表于2018-08-23 15:59 被阅读0次
    引导:

    在angularJS中,有应用(模块),控制器(controller),作用域(scope)三个概念。
    一个应用可以由一个模块组成,也可以由多个模块组成。
    一个模块有多个控制器,我们用控制器来处理业务逻辑。
    所以一个应用应当按照业务逻辑来分割模块,降低应用的耦合度,实现编程的可模块化。

    作用域:

    scope(作用域)包含了控制器所拥有的属性与方法。熟悉服务端的朋友可以将它理解为一个object,一个object对应了一个controller的属性与方法。

    scope的原型链继承:

    先上个代码:

    <html ng-app="scopeTest">
    <head>
        <meta charset="utf-8">
        <script src="../js/angular.min.js"></script>
    </head>
    <body>
    <div ng-controller="pController">
    
        <h2>{{number}}</h2>
        <div ng-controller="cController">
            <h3>{{$parent.number}}</h3>
            <h3>{{number}}</h3>
        </div>
    
    </div>
    <script>
        var app = angular.module("scopeTest",[]);
        app.controller("pController",function ($scope) {
            $scope.number = 0;
        });
        app.controller("cController",function ($scope) {
            $scope.number = 1;
        });
    </script>
    </body>
    </html>
    
    

    代码中出现了controller的嵌套,于是也就出现了scope的原型链关系:子scope继承父scope的属性与方法,直接操作子scope会覆盖掉父scope的属性,带在父scope(父域)中不会造成影响,这个覆盖只会存在于子域中。
    而如果你想对父域也造成影响,则需要直接对父域进行操作。

    app.controller("cController",function ($scope) {
            $scope.number = 1;
            $scope.$parent.number = 2;
        });
    

    对子域进行操作

    $scope.$$childHead.title="..."; 
    $scope.$$childTail.title="...";
    

    对兄弟域进行操作

    $scope.$$nextSibling.title="...";
    $scope.$$prevSibling.title="...";
    
    scope的方法:

    https://blog.csdn.net/wl11295210/article/details/55504218

    1.scope提供了一些工具方法watch()、apply()watch()用于监听模型变化,当模型发生变化,它会提示你的。
    表达式:$watch(watchExpression, listener, objectEquality);

    其参数:watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

    listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)。

    objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

    关于$apply(),这篇文章讲的很清晰:

    https://www.cnblogs.com/penghongwei/p/3398361.html

    相关文章

      网友评论

          本文标题:AngularJS_scope嵌套原型链与方法

          本文链接:https://www.haomeiwen.com/subject/zyfmiftx.html