美文网首页
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嵌套原型链与方法

    引导: 在angularJS中,有应用(模块),控制器(controller),作用域(scope)三个概念。一个...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • Es5 继承

    Es5 对象和原型链实现混合继承 方法的区别 在构造函数和原型链添加方法区别: 结论: 原型链上的方法会被多个实...

  • 2019-01-28

    原型与原型链

  • JavaScript 原型与原型链

    原型链:通过原型链实现的,子类调用父类的方法时会一直沿着原型链往上找到父类的原型对象并调用相应的方法从而实现继承;...

  • 四、js实现继承的几个方法

    1. 原型链 原型链是实现继承的主要方法,它是利用原型,让一个引用类型继承另一个应用类型的属性和方法。 实现原型链...

  • 面试题【Day06】

    本篇绪论 1,原型、原型链 1,原型、原型链 创建对象的几种方法: 1,字面量 2, 构造函数 3, Object...

  • Javascript 面向对象的程序设计(原型链与继承)

    继承 原型链 讲原型的时候提到过继承,设计原型的初衷就是为了继承,原型链是实现继承的主要方法。那什么是原型链,还记...

  • JavaScript继承

    原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用...

  • 原型链以及继承

    原型链 原型链类似关系链,几乎所有的js对象都会有通过原型链prototype继承过来的方法或者属性,在java和...

网友评论

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

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