Js之Scope效用域的就学课程

By admin in 4858美高梅 on 2019年5月5日

前言:

AngularJs之Scope作用域,angularjsscope

前言:

上篇博文AngularJs之directive中说了Scope作用域是个壁屋,所以拿出去作为关键总括!

scope是什么?

上篇博文AngularJs之directive中说了Scope功效域是个苏屋,所以拿出去作为第3总计!

什么是scope

  AngularJS
中,功用域是贰个对准应用模型的靶子,它是表明式的实施景况。成效域有档次结构,那一个档案的次序和呼应的
DOM 差不离是千篇一律的。效用域能监控表达式和传递事件。

  在 HTML 代码中,1旦3个 ng-app
指令被定义,那么1个作用域就产生了,由 ng-app
所生成的效用域比较杰出,它是一个根效能域($rootScope),它是其余拥有$Scope
的最顶层。

  除了用 ng-app 指令可以产生3个成效域之外,别的的吩咐如
ng-controller,ng-repeat 等都会发生三个依旧多少个效能域。别的,还是能透过
AngularJS
提供的创立成效域的厂子方法来创设2个作用域。那个成效域都存有和谐的接轨上下文,并且根功能域都为$rootScope。

  在转移三个成效域之后,在编写制定 AngularJS 代码时,$scope
对象就意味着了这么些作用域的数目实体,大家能够在$scope
钦点义种种数据类型,之后方可从来在 HTML 中以 {{变量名}} 格局来让 HTML
访问到那几个变量。

大家都知道在AngularJS
中功效域是1个针对性应用模型的靶子,它是表明式的实行情形。作用域有档期的顺序结构,那么些档案的次序和相应的
DOM 大概是如出一辙的。成效域能监察和控制表明式和传递事件。

什么是scope

  AngularJS
中,效能域是八个对准应用模型的靶子,它是表明式的实行遇到。效能域有档案的次序结构,那个档案的次序和呼应的
DOM 大致是同等的。成效域能监察和控制表明式和传递事件。

  在
HTML 代码中,1旦一个 ng-app 指令被定义,那么三个效率域就发生了,由
ng-app
所生成的成效域比较卓殊,它是二个根功能域($rootScope),它是别的兼具$Scope
的最顶层。

  除了用
ng-app 指令能够生出一个效率域之外,其他的命令如 ng-controller,ng-repeat
等都会发生一个要么七个功能域。其余,还足以因此 AngularJS
提供的创设成效域的工厂方法来创立1个功能域。那个效率域都存有自身的接轨上下文,并且根成效域都为$rootScope。

  在调换一个作用域之后,在编辑
AngularJS 代码时,$scope
对象就表示了那么些功用域的多寡实体,大家得以在$scope
钦点义种种数据类型,之后能够直接在 HTML 中以 {{变量名}} 情势来让 HTML
访问到那些变量。

Js之Scope效用域的就学课程。延续功能域

  AngularJS
在开立3个作用域时,会搜索上下文,假使前后文中已经存在2个成效域,那么这一个新创制的功用域就能够以
JavaScript 原型承接机制接轨其父成效域的属性和措施。

  一些 AngularJS
指令会成立新的子成效域,并且打开原型承袭: ng-repeat、ng-include、ng-switch、ng-view、ng-controller,
用 scope: true 和 transclude: true 创立的 directive。

  以下 HTML 中定义了三个效用域,分别是由 ng-app
指令所创设的$rootScope,parentCtrl 和 childCtrl 所创立的子成效域,那当中childCtrl 生成的成效域又是 parentCtrl 的子功用域。

在 HTML 代码中,1旦多个 ng-app 指令被定义,那么2个功能域就生出了,由
ng-app
所生成的效率域比较独特,它是一个根功用域($rootScope),它是任何兼具$Scope
的最顶层。

一而再成效域

  AngularJS
在开创1个成效域时,会招来上下文,假若前后文中已经存在三个成效域,那么那么些新成立的功用域就能够以
JavaScript 原型承接机制接轨其父成效域的品质和艺术。

  一些
AngularJS
指令会成立新的子作用域,并且进行原型承继: ng-repeat、ng-include、ng-switch、ng-view、ng-controller,
用 scope: true 和 transclude: true 创立的 directive。

  以下
HTML 中定义了八个功用域,分别是由 ng-app
指令所开创的$rootScope,parentCtrl 和 childCtrl 所创建的子功效域,那之中
childCtrl 生成的功效域又是 parentCtrl 的子作用域。

演示一:成效域的接续实例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args= 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
                $scope.args= 'Nick DeveloperWorks for test';
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args">
    <div ng-controller="childCtrl">
        <input ng-model="args">
    </div>
</div>
</body>
</html>

  承继成效域符合 JavaScript
的原型袭继机制,那象征一旦大家在子功能域中走访3个父作用域中定义的质量,JavaScript
首先在子成效域中检索该属性,没找到再从原型链上的父功能域中搜索,假若还没找到会再往上一流原型链的父功用域搜索。在
AngularJS 中,功效域原型链的上方是$rootScope,AnguarJS
将会招来到$rootScope 甘休,假使依然找不到,则会回去 undefined。

  大家用实例代码表明下这一个机制。首先,大家查究下对于原型数据类型的效能域承袭机制:

除却用 ng-app 指令能够生出四个功效域之外,别的的一声令下如
ng-controller,ng-repeat 等都会发生2个照旧多个功效域。其余,还足以由此AngularJS
提供的创始效能域的工厂方法来成立一个效率域。那些功用域都负有本身的承袭上下文,并且根功能域都为$rootScope。

演示一:成效域的存在延续实例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args= 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
                $scope.args= 'Nick DeveloperWorks for test';
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args">
    <div ng-controller="childCtrl">
        <input ng-model="args">
    </div>
</div>
</body>
</html>

  承继功能域符合
JavaScript
的原型承接机制,那意味着一旦大家在子作用域中访问1个父成效域中定义的习性,JavaScript
首先在子功效域中寻找该属性,没找到再从原型链上的父成效域中寻觅,若是还没找到会再往上一级原型链的父效率域寻觅。在
AngularJS 中,成效域原型链的顶端是$rootScope,AnguarJS
将会招来到$rootScope 截至,倘诺如故找不到,则会回去 undefined。

  我们用实例代码表达下那么些机制。首先,大家查究下对于原型数据类型的作用域传承机制:

演示二:效用域承继实例-原始类型数据持续

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args = 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args">
    <div ng-controller="childCtrl">
        <input ng-model="args">
    </div>
</div>
</body>
</html>

测试运维结果:

先是个输入框:

  纵然在 childCtrl 中从不概念具体的 args 属性,不过因为 childCtrl
的功用域承袭自 parentCtrl 的成效域,由此,AngularJS 会找到父效能域中的
args
属性并设置到输入框中。而且,假使我们在第贰个输入框中改换内容,内容将会联合的反射到第四个输入框。

其次个输入框:

  第二个输入框的剧情从此将不再和率先个输入框的从头到尾的经过保持同步。在转移第一个输入框的内容时,因为
HTML 代码中 model 鲜明绑定在 childCtrl 的效率域中,由此 AngularJS 会为
childCtrl 生成3个 args 原始类型属性。这样,依据 AngularJS
功用域承接原型机制,childCtrl 在融洽的功能域找得到 args
这么些天性,从而也不再会去寻找 parentCtrl 的 args
属性。从此,多少个输入框的内容所绑定的性质已经是两份分歧的实例,由此不会再保持同步。

现将代码做如下修改,结合以上四个情景,会冒出哪些的结果?

在扭转三个成效域之后,在编写 AngularJS 代码时,$scope
对象就代表了那一个功能域的数目实体,大家得以在$scope
钦命义各个数据类型,之后方可直接在 HTML 中以 {{变量名}} 格局来让 HTML
访问到那么些变量。

以身作则二:功能域承袭实例-原始类型数据持续

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args = 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args">
    <div ng-controller="childCtrl">
        <input ng-model="args">
    </div>
</div>
</body>
</html>

测试运转结果:

首先个输入框:

  纵然在
childCtrl 中从未概念具体的 args 属性,可是因为 childCtrl 的成效域承袭自
parentCtrl 的功能域,因而,AngularJS 会找到父成效域中的 args
属性并设置到输入框中。而且,假若我们在率先个输入框中改造内容,内容将会联合的反馈到第3个输入框。

其次个输入框:

  首个输入框的剧情从此将不再和率先个输入框的剧情保持同步。在退换第三个输入框的源委时,因为
HTML 代码中 model 鲜明绑定在 childCtrl 的功效域中,因而 AngularJS 会为
childCtrl 生成贰个 args 原始类型属性。那样,根据 AngularJS
功效域承袭原型机制,childCtrl 在友好的成效域找得到 args
那性子子,从而也不再会去搜索 parentCtrl 的 args
属性。从此,三个输入框的从头到尾的经过所绑定的性质已经是两份区别的实例,由此不会再保持同步。

现将代码做如下修改,结合以上七个现象,会并发什么的结果?

演示三:效用域承袭实例-对象数据持续

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args = {};
                $scope.args.content = 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args.content">
    <div ng-controller="childCtrl">
        <input ng-model="args.content">
    </div>
</div>
</body>
</html>

测试结果是无论改换任何一个输入框的故事情节,两者的剧情一向同步。

  依照 AngularJS 的原型承袭机制,假使 ng-model
绑定的是三个对象数据,那么 AngularJS 将不会为 childCtrl 制造叁个 args
的对象,自然也不会有 args.content 属性。那样,childCtrl
功用域少将始终不会存在 args.content
属性,只好从父作用域中检索,也便是七个输入框的的变通实在只是在退换parentCtrl 功效域中的 args.content 属性。因而,两者的剧情一向维持同步。

  我们再看二个例证,分析结果什么。

接轨成效域

示范三:成效域承接实例-对象数据继续

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args = {};
                $scope.args.content = 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args.content">
    <div ng-controller="childCtrl">
        <input ng-model="args.content">
    </div>
</div>
</body>
</html>

测试结果是不管更动任何三个输入框的故事情节,两者的故事情节一直同步。

  依照AngularJS 的原型继承机制,假如 ng-model 绑定的是贰个对象数据,那么
AngularJS 将不会为 childCtrl 创造一个 args 的目的,自然也不会有
args.content 属性。那样,childCtrl 功用域准将始终不会设有 args.content
属性,只可以从父作用域中研究,也正是四个输入框的的浮动实在只是在改动parentCtrl 效用域中的 args.content
属性。因而,两者的剧情一贯维持同步。

  大家再看2个事例,分析结果什么。

演示四:成效域承继实例-不再访问父功效域的多寡对象。

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args = {};
                $scope.args.content = 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
                $scope.args = {};
                $scope.args.content = 'Nick DeveloperWorks for test';
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args.content">
    <div ng-controller="childCtrl">
        <input ng-model="args.content">
    </div>
</div>
</body>
</html>

  测试结果是八个输入框的剧情长久不会同步。子成效域有实例数据对象,则不访问父作用域。

AngularJS
在创设1个成效域时,会招来上下文,假如前后文中已经存在八个成效域,那么那几个新创立的成效域就能够以
JavaScript 原型承接机制接轨其父效率域的习性和艺术。

以身作则四:效率域承袭实例-不再访问父成效域的数目对象。

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('parentCtrl', ['$scope', function($scope) {
                $scope.args = {};
                $scope.args.content = 'Nick DeveloperWorks';
            }])
            .controller('childCtrl', ['$scope', function($scope) {
                $scope.args = {};
                $scope.args.content = 'Nick DeveloperWorks for test';
            }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
    <input ng-model="args.content">
    <div ng-controller="childCtrl">
        <input ng-model="args.content">
    </div>
</div>
</body>
</html>

  测试结果是多少个输入框的内容恒久不会联手。子功用域有实例数据对象,则不访问父成效域。

单独功效域

  独立效能域是 AngularJS 中二个格外出格的功效域,它只在 directive
中冒出。在对 directive 的定义中,我们增添上三个 scope:{} 属性,就为这个directive 创造出了1个割裂效率域。

一部分 AngularJS 指令会成立新的子成效域,并且张开原型承接:
ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用
scope: truetransclude: true 创建的 directive。

单身功能域

  独立功效域是
AngularJS 中多少个可怜出格的功效域,它只在 directive 中冒出。在对
directive 的定义中,大家增添上1个 scope:{} 属性,就为那几个 directive
创立出了多少个隔开分离功用域。

演示伍: directive 创制出贰个孤立功能域

angular.module('isolate', []).directive("isolate", function () {
 return {
 scope : {},
 };
})

  独立作用域最大的特点是不会原型承袭其父成效域,对外边的父成效域保持相对的独立。因而,借使在概念了孤立成效域的
AngularJS directive 中想要访问其父效用域的属性,则得到的值为
undefined。代码如下:

以下 HTML 中定义了五个功效域,分别是由 ng-app
指令所创设的$rootScope,parentCtrl 和 childCtrl 所创立的子功用域,那在那之中childCtrl 生成的成效域又是 parentCtrl 的子成效域。

示范5: directive 成立出贰个孤立功能域

angular.module('isolate', []).directive("isolate", function () {
 return {
 scope : {},
 };
})

  独立效能域最大的性状是不会原型承接其父功用域,对外面的父效用域保持相对的独自。由此,假诺在概念了孤立作用域的
AngularJS directive 中想要访问其父功能域的天性,则收获的值为
undefined。代码如下:

示例6:独立效能域的隔开性

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('ctrl', ['$scope', function($scope) {
                $scope.args = {};
            }])
            .directive("isolateDirective", function () {
                return {
                    scope : {},
                    link : function($scope, $element, $attr) {
                        console.log($scope.$args); //输出 undefined
                    }
                };
            });
</script>
<body ng-app="app">
<div ng-controller="ctrl">
    <div isolate-directive></div>
</div>
</body>
</html>

  下面的代码中经过在 directive 中宣示了 scope
属性从而开创了二个功用域,其父作用域为 ctrl
所属的作用域。可是,那些成效域是孤立的,因而,它访问不到父功效域的中的任何性质。存在这么设计编写制定的裨益是:能够创造出一些列可复用的
directive,这几个 directive
不会互相在装有的属性值上发生串扰,也不会发生任何副效用。

演示一:功效域的接续实例

示例陆:独立成效域的隔离性

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
    angular.module('app', [])
            .controller('ctrl', ['$scope', function($scope) {
                $scope.args = {};
            }])
            .directive("isolateDirective", function () {
                return {
                    scope : {},
                    link : function($scope, $element, $attr) {
                        console.log($scope.$args); //输出 undefined
                    }
                };
            });
</script>
<body ng-app="app">
<div ng-controller="ctrl">
    <div isolate-directive></div>
</div>
</body>
</html>

  上面的代码中经过在
directive 中宣示了 scope 属性从而创设了四个功用域,其父功用域为 ctrl
所属的成效域。不过,这几个效率域是孤立的,因而,它访问不到父作用域的中的任何性质。存在那样设计编写制定的好处是:可以创立出有个别列可复用的
directive,那一个 directive
不会相互在装有的属性值上发出串扰,也不会生出任何副功能。

AngularJS 独立功能域的数量绑定

  在持续成效域中,大家能够选择子功效域直接操作父作用域数据来得以完毕老爹和儿子作用域的通讯,而在独立成效域中,子作用域无法直接待上访问和改变父效能域的性质和值。为了能够使孤立功效域也能和外边通讯,AngularJS
提供了两种办法用来打破独立效能域“孤立”这一范围。

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args= 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  $scope.args= 'Nick DeveloperWorks for test';
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args">
 <div ng-controller="childCtrl">
 <input ng-model="args">
 </div>
</div>
</body>
</html>

AngularJS 独立成效域的数量绑定

  在持续作用域中,大家能够选芭乐成效域直接操作父成效域数据来贯彻老爹和儿子成效域的通讯,而在单独功效域中,子成效域不可能直接待上访问和改造父作用域的品质和值。为了能够使孤立效用域也能和外面通信,AngularJS
提供了三种形式用来打破独立功用域“孤立”这一限量。

1方面绑定(@ 恐怕 @attr)

  那是 AngularJS
独立功用域与外面父功能域举办数量通讯中最简便的壹种,绑定的目的只可以是父功能域中的字符串值,并且为单向只读引用,不能够对父效用域中的字符串值进行改动,别的,这几个字符串还必须在父效率域的
HTML 节点中以 attr(属性)的办法宣示。

  使用那种绑定情势时,须求在 directive 的 scope
属性中分明钦定引用父功能域中的 HTML
字符串属性,不然会抛分外。示例代码如下:

持续成效域符合 JavaScript
的原型传承机制,那代表借使大家在子作用域中走访二个父成效域中定义的品质,JavaScript
首先在子功效域中搜索该属性,没找到再从原型链上的父成效域中寻找,假使还没找到会再往上超级原型链的父成效域寻找。在
AngularJS 中,作用域原型链的上方是$rootScope,AnguarJS
将会招来到$rootScope 停止,固然依然找不到,则会再次来到 undefined。

1派绑定(@ 或许 @attr)

  那是
AngularJS
独立成效域与外边父成效域进行数量通讯中最简便的一种,绑定的目的只可以是父成效域中的字符串值,并且为单向只读引用,比极小概对父功效域中的字符串值实行修改,其它,这么些字符串还必须在父功能域的
HTML 节点中以 attr(属性)的办法宣示。

  使用那种绑定方式时,需求在
directive 的 scope 属性中确定内定引用父成效域中的 HTML
字符串属性,不然会抛相当。示例代码如下:

实例7: 单向绑定示例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
    angular.module('isolateScope', [])
            .directive("isolateDirective", function () {
                return {
                    replace : true,
                    template: '<button>{{isolates}}</button>',
                    scope : {
                        isolates : '@',
                    },
                    link : function($scope, $element, $attr) {
                        $scope.isolates = "DeveloperWorks";//无效
                    }
                };
            })
            .controller("ctrl", function ($scope) {
                $scope.btns = 'NICK';
            });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
    <button>{{btns}}</button>
    <div isolate-directive isolates="{{btns}}"></div>
</div>
</body>
</html>

  上面包车型客车代码,通过在 directive 中宣示了 scope:{isolates:’@’} 使得
directive 具有了父成效域中 data-isolates
(isolates为自定义属性,不加data也能够,但提议加上data)那个 HTML
属性所具有的值,那个值在调整器 ctrl
中被赋值为’nick’。所以,代码的运营结果是页面上有四个名字为 nick的按键。

  大家还注意到 link 函数中对 isolates
实行了修改,不过最终不会在运维结果中反映。那是因为 isolates
始终绑定为父功能域中的 btns 字符串,要是父效率域中的 btns
不转移,那么在孤立成效域中不管怎么修改 isolates 都不会起作用。

咱俩用实例代码表达下那几个机制。首先,大家探究下对于原型数据类型的功效域传承机制:

实例柒: 单向绑定示例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
    angular.module('isolateScope', [])
            .directive("isolateDirective", function () {
                return {
                    replace : true,
                    template: '<button>{{isolates}}</button>',
                    scope : {
                        isolates : '@',
                    },
                    link : function($scope, $element, $attr) {
                        $scope.isolates = "DeveloperWorks";//无效
                    }
                };
            })
            .controller("ctrl", function ($scope) {
                $scope.btns = 'NICK';
            });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
    <button>{{btns}}</button>
    <div isolate-directive isolates="{{btns}}"></div>
</div>
</body>
</html>

  下边包车型地铁代码,通过在
directive 中宣称了 scope:{isolates:’@’} 使得 directive 具有了父作用域中
data-isolates (isolates为自定义属性,不加data也足以,但提出加上data)那几个HTML 属性所负有的值,那一个值在支配器 ctrl
中被赋值为’nick’。所以,代码的运维结果是页面上有两个名称叫nick的开关。

  咱们还在意到
link 函数中对 isolates
实行了改变,然而最后不会在运行结果中呈现。那是因为 isolates
始终绑定为父成效域中的 btns 字符串,如若父作用域中的 btns
不退换,那么在孤立成效域中不管怎么修改 isolates 都不会起效果。

引用绑定(&大概&attr)

  通过那种样式的绑定,孤立功能域将有力量访问到父成效域中的函数对象,从而能够实施父功用域中的函数来获得某个结果。那种格局的绑定跟单向绑定同样,只好以只读的艺术访问父成效函数,并且那几个函数的概念必须写在父效能域
HTML 中的 attr(属性)节点上。

  这种办法的绑定固然不能够修改父效能域的 attr
所设定的函数对象,不过却得以透过实施函数来改换父成效域中有个别品质的值,来完成一些预料的效益。示例代码如下:

示范二:成效域承继实例-原始类型数据持续

引用绑定(&也许&attr)

  通过那种样式的绑定,孤立功用域将有力量访问到父成效域中的函数对象,从而能够实行父成效域中的函数来获取有个别结果。那种艺术的绑定跟单向绑定同样,只可以以只读的不2秘诀访问父成效函数,并且那些函数的定义必须写在父成效域
HTML 中的 attr(属性)节点上。

  那种方法的绑定即便不能够修改父成效域的
attr
所设定的函数对象,可是却得以透过试行函数来改换父效用域中有个别质量的值,来达成一些预期的职能。示例代码如下:

示例捌:引用绑定示例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
    angular.module('isolateScope', [])
            .directive("isolateDirective", function () {
                return {
                    replace : true,
                    scope : {
                        isolates : '&',
                    },
                    link : function($scope, $element, $attr) {
                        var func = $scope.isolates();
                        func();
                    }
                };
            })
            .controller("ctrl", function ($scope) {
                $scope.func = function () {
                    console.log("Nick DeveloperWorks");
                }
            });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
    <div isolate-directive data-isolates="func"></div>
</div>
</body>
</html>

  那些例子中,浏览器的调整台将会打字与印刷“尼克 DeveloperWorks”文字。

  上边的代码中大家在父功用域中钦定了一个函数对象$scope.func,在孤立作用域中通过对
HTML 属性的绑定从而引用了 func。必要留意的是 link 函数中对 func
对象的利用格局,$scope.isolates
获得的1味是函数对象,而不是调用那一个目的,由此大家要求在调用完$scope.isolates
之后再调用那一个函数,技巧获取真正的实践结果。

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args = 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args">
 <div ng-controller="childCtrl">
 <input ng-model="args">
 </div>
</div>
</body>
</html>

示例8:引用绑定示例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
    angular.module('isolateScope', [])
            .directive("isolateDirective", function () {
                return {
                    replace : true,
                    scope : {
                        isolates : '&',
                    },
                    link : function($scope, $element, $attr) {
                        var func = $scope.isolates();
                        func();
                    }
                };
            })
            .controller("ctrl", function ($scope) {
                $scope.func = function () {
                    console.log("Nick DeveloperWorks");
                }
            });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
    <div isolate-directive data-isolates="func"></div>
</div>
</body>
</html>

  那一个例子中,浏览器的调整台将会打字与印刷“NickDeveloperWorks”文字。

  上边的代码中大家在父功用域中钦命了3个函数对象$scope.func,在孤立成效域中经过对
HTML 属性的绑定从而引用了 func。供给注意的是 link 函数中对 func
对象的施用方式,$scope.isolates
获得的无非是函数对象,而不是调用这一个目的,由此大家要求在调用完$scope.isolates
之后再调用这么些函数,才干收获真正的施行结果。

双向绑定(=恐怕=attr)

双向绑定赋予 AngularJS
孤立功能域与外面最为自由的双向数据通讯功效。在双向绑定情势下,孤立作用域能够平昔读写父功效域中的属性和数量。和上述二种孤立成效域定义数据绑定同样,双向绑定也务必在父作用域的
HTML 中设定属性节点来绑定。

双向绑定相当适用于部分子 directive
要求频仍和父成效域实行数量交互,并且数据比较复杂的现象。可是,由于能够随意的读写父成效域中的属性和对象,所以在局部多个directive 共享父功能域数据的情景下供给小心使用,很轻易招惹数据上的眼花缭乱。

演示代码如下:

测试运维结果:

双向绑定(=也许=attr)

双向绑定赋予
AngularJS
孤立成效域与外界最为自由的双向数据通讯功效。在双向绑定形式下,孤立成效域能够平素读写父功用域中的属性和数目。和上述三种孤立成效域定义数据绑定同样,双向绑定也非得在父功用域的
HTML 中设定属性节点来绑定。

双向绑定相当适用于有个别子
directive
要求频繁和父功用域实行数据交互,并且数据相比较复杂的景色。但是,由于可以自便的读写父成效域中的属性和对象,所以在一些多个directive
共享父成效域数据的气象下要求小心使用,很轻便引起数据上的混乱。

以身作则代码如下:

示例九:双向绑定示例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
    angular.module('isolateScope', [])
            .directive("isolateDirective", function () {
                return {
                    replace : true,
                    template: '<button>{{isolates}}</button>',
                    scope : {
                        isolates : '=',
                    },
                    link : function($scope, $element, $attr) {
                        $scope.isolates.name = "NICK";
                    }
                };
            })
            .controller("ctrl", function ($scope) {
                $scope.btns = {
                    name : 'nick',
                    dw : 'DeveloperWorks'
                };
            });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
    <button>{{btns.dw}}</button>
    <button>{{btns.name}}</button>
    <div isolate-directive data-isolates="btns"></div>
</div>
</body>
</html>

  上边的代码运转的结果是浏览器页面上出现多个开关,个中第四个按键标题为“DeveloperWorks”,第一和首个开关的题目为“NICK”。

起来时父效率域中的$scope.btns.name为小写的“nick”,通过双向绑定,孤立功能域大校父功能域的
name改写成为大写的“NICK”并且直接生效,父功效域的值被改变。

  推荐:那篇关于成效域的篇章也写的不利,能够看看!

 

前言:
上篇博文AngularJs之directive中说了Scope成效域是个北潭涌,所以拿出去作为珍视总计!
什么是scope Ang…

第一个输入框:

示例玖:双向绑定示例

<!doctype html>
<html>
<head>
    <meta charset=utf-8"/>
    <title>scope nick</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
    angular.module('isolateScope', [])
            .directive("isolateDirective", function () {
                return {
                    replace : true,
                    template: '<button>{{isolates}}</button>',
                    scope : {
                        isolates : '=',
                    },
                    link : function($scope, $element, $attr) {
                        $scope.isolates.name = "NICK";
                    }
                };
            })
            .controller("ctrl", function ($scope) {
                $scope.btns = {
                    name : 'nick',
                    dw : 'DeveloperWorks'
                };
            });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
    <button>{{btns.dw}}</button>
    <button>{{btns.name}}</button>
    <div isolate-directive data-isolates="btns"></div>
</div>
</body>
</html>

  上边的代码运转的结果是浏览器页面上边世多个开关,在那之中第二个开关标题为“DeveloperWorks”,第二和第捌个开关的题目为“NICK”。

千帆竞发时父功效域中的$scope.btns.name为小写的“nick”,通过双向绑定,孤立成效域中校父成效域的
name改写成为大写的“NICK”并且直接生效,父效率域的值被转移。

  推荐:那篇有关成效域的小说也写的不错,能够看看!

 

虽说在 childCtrl 中绝非概念具体的 args 属性,不过因为 childCtrl
的功用域承继自 parentCtrl 的效能域,因而,AngularJS 会找到父功效域中的
args
属性并设置到输入框中。而且,假设我们在第3个输入框中改换内容,内容将会共同的反射到第三个输入框。

第三个输入框:

其次个输入框的剧情从此将不再和第二个输入框的开始和结果保持同步。在改造第二个输入框的内容时,因为
HTML 代码中 model 显著绑定在 childCtrl 的魔法域中,因而 AngularJS 会为
childCtrl 生成一个 args 原始类型属性。那样,依照 AngularJS
功效域承继原型机制,childCtrl 在和睦的作用域找获得 args
那特特性,从而也不再会去追寻 parentCtrl 的 args
属性。从此,多个输入框的原委所绑定的特性已经是两份不一样的实例,因而不会再保持同步。

现将代码做如下修改,结合以上七个现象,会油但是生什么的结果?

示范3:功效域承袭实例-对象数据持续

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args = {};
  $scope.args.content = 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args.content">
 <div ng-controller="childCtrl">
 <input ng-model="args.content">
 </div>
</div>
</body>
</html>

测试结果是无论改变任何2个输入框的剧情,两者的剧情一向同步。

依据 AngularJS 的原型承接机制,假设 ng-model 绑定的是三个目的数据,那么
AngularJS 将不会为 childCtrl 创立二个 args
的目的,自然也不会有args.content属性。这样,childCtrl
成效域上校始终不会存在
args.content属性,只可以从父成效域中检索,也便是五个输入框的的扭转莫过于只是在改变parentCtrl
功用域中的args.content品质。因而,两者的内容一向维持同步。

咱俩再看1个例证,分析结果什么。

演示4:功能域承接实例-不再访问父成效域的数目对象。

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args = {};
  $scope.args.content = 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  $scope.args = {};
  $scope.args.content = 'Nick DeveloperWorks for test';
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args.content">
 <div ng-controller="childCtrl">
 <input ng-model="args.content">
 </div>
</div>
</body>
</html>

测试结果是多个输入框的内容永恒不会同步。子作用域有实例数据对象,则不访问父成效域。

单独功效域

独自成效域是 AngularJS 中一个卓殊杰出的成效域,它只在 directive
中冒出。在对 directive 的定义中,我们增添上一个
scope:{}品质,就为那么些 directive 创立出了多个隔断作用域。

演示五: directive
创设出三个孤立功用域

angular.module('isolate', []).directive("isolate", function () {
 return {
 scope : {},
 };
})

独自效能域最大的个性是不会原型承袭其父功用域,对外边的父作用域保持相对的独立。由此,要是在概念了孤立功效域的
AngularJS directive 中想要访问其父功能域的质量,则获得的值为
undefined。代码如下:

示例6:独立功用域的隔开性

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('ctrl', ['$scope', function($scope) {
  $scope.args = {};
  }])
  .directive("isolateDirective", function () {
  return {
   scope : {},
   link : function($scope, $element, $attr) {
   console.log($scope.$args); //输出 undefined
   }
  };
  });
</script>
<body ng-app="app">
<div ng-controller="ctrl">
 <div isolate-directive></div>
</div>
</body>
</html>

上边的代码中经过在 directive 中扬言了 scope
属性从而创立了三个成效域,其父功能域为 ctrl
所属的作用域。可是,那一个作用域是孤立的,因而,它访问不到父成效域的中的任何性质。存在那样设计编写制定的补益是:能够创建出某些列可复用的
directive,那个 directive
不会互相在具备的属性值上发生串扰,也不会时有发生其余副功效。

AngularJS 独立成效域的数额绑定

在继续效用域中,大家能够选取子效用域直接操作父效能域数据来促成父子成效域的通讯,而在单身成效域中,子成效域不能够直接待上访问和退换父功效域的习性和值。为了能够使孤立成效域也能和外界通讯,AngularJS
提供了三种办法用来打破独立成效域“孤立”那一限制。

一面绑定(@ 大概 @attr)

那是 AngularJS
独立功能域与外边父功效域举办数量通信中最简便易行的一种,绑定的目的只好是父效率域中的字符串值,并且为单向只读引用,不可能对父功效域中的字符串值进行改造,其余,这一个字符串还非得在父功效域的
HTML 节点中以 attr(属性)的措施宣示。

动用那种绑定格局时,必要在 directive 的 scope
属性中明显钦命引用父效用域中的 HTML
字符串属性,不然会抛至极。示例代码如下:

实例7: 单向绑定示例

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
 angular.module('isolateScope', [])
  .directive("isolateDirective", function () {
  return {
   replace : true,
   template: '<button>{{isolates}}</button>',
   scope : {
   isolates : '@',
   },
   link : function($scope, $element, $attr) {
   $scope.isolates = "DeveloperWorks";//无效
   }
  };
  })
  .controller("ctrl", function ($scope) {
  $scope.btns = 'NICK';
  });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
 <button>{{btns}}</button>
 <div isolate-directive isolates="{{btns}}"></div>
</div>
</body>
</html>

地点的代码,通过在 directive 中扬言了 scope:{isolates:'@'} 使得
directive 具备了父效率域中 data-isolates
(isolates为自定义属性,不加data也能够,但提议加上data)这一个 HTML
属性所负有的值,那么些值在调控器 ctrl
中被赋值为’nick’。所以,代码的运作结果是页面上有多个名叫 nick的开关。

大家还注意到 link 函数中对 isolates
进行了更换,可是最终不会在运行结果中显示。那是因为 isolates
始终绑定为父成效域中的 btns 字符串,要是父效能域中的 btns
不更换,那么在孤立功能域中不管怎么修改 isolates 都不会起效果。

透过那种样式的绑定,孤立成效域将有力量访问到父作用域中的函数对象,从而能够施行父成效域中的函数来获得有个别结果。那种方法的绑定跟单向绑定同样,只好以只读的点子访问父成效函数,并且这一个函数的概念必须写在父功效域
HTML 中的 attr(属性)节点上。

那种措施的绑定就算不恐怕修改父效用域的 attr
所设定的函数对象,然则却得以透超过实际践函数来改换父效用域中有些品质的值,来达成一些预料的效益。示例代码如下:

示例8:引用绑定示例

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
 angular.module('isolateScope', [])
   .directive("isolateDirective", function () {
    return {
     replace : true,
     scope : {
      isolates : '&',
     },
     link : function($scope, $element, $attr) {
      var func = $scope.isolates();
      func();
     }
    };
   })
   .controller("ctrl", function ($scope) {
    $scope.func = function () {
     console.log("Nick DeveloperWorks");
    }
   });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
 <div isolate-directive data-isolates="func"></div>
</div>
</body>
</html>

其一例子中,浏览器的调控台将会打字与印刷“Nick DeveloperWorks”文字。

下边包车型客车代码中大家在父功效域中钦点了1个函数对象$scope.func,在孤立功用域中经过对
HTML 属性的绑定从而引用了 func。供给小心的是 link 函数中对 func
对象的利用格局,$scope.isolates收获的独自是函数对象,而不是调用这么些目的,由此大家须求在调用完$scope.isolates然后再调用这一个函数,才具获得实在的进行结果。

双向绑定(=恐怕=attr)

双向绑定赋予 AngularJS
孤立功效域与外边最为自由的双向数据通讯功能。在双向绑定格局下,孤立效率域能够一向读写父成效域中的属性和数码。和上述两种孤立成效域定义数据绑定同样,双向绑定也无法不在父效能域的
HTML 中设定属性节点来绑定。

双向绑定十分适用于部分子 directive
需求反复和父成效域举行多少交互,并且数据比较复杂的现象。可是,由于能够随便的读写父成效域中的属性和对象,所以在部分几个directive 共享父成效域数据的情景下需求小心使用,很轻松滋生数据上的杂乱。

演示代码如下:

示例玖:双向绑定示例

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
 angular.module('isolateScope', [])
   .directive("isolateDirective", function () {
    return {
     replace : true,
     template: '<button>{{isolates}}</button>',
     scope : {
      isolates : '=',
     },
     link : function($scope, $element, $attr) {
      $scope.isolates.name = "NICK";
     }
    };
   })
   .controller("ctrl", function ($scope) {
    $scope.btns = {
     name : 'nick',
     dw : 'DeveloperWorks'
    };
   });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
 <button>{{btns.dw}}</button>
 <button>{{btns.name}}</button>
 <div isolate-directive data-isolates="btns"></div>
</div>
</body>
</html>

上边的代码运维的结果是浏览器页面上边世八个开关,当中第二个开关标题为“DeveloperWorks”,第3和第四个开关的标题为“NICK”。

4858美高梅 ,起来时父效用域中的$scope.btns.name为小写的“nick”,通过双向绑定,孤立成效域大校父功能域的
name改写成为大写的“NICK”并且间接生效,父功效域的值被改造。

总结

如上正是那篇小说的全体内容了,希望本文的开始和结果对我们的求学或然专业能拉动一定的扶持,要是有问号我们能够留言调换,感谢大家对台本之家的支撑。

你或然感兴趣的稿子:

  • Angular
    效率域scope的现实采取
  • 深刻探究AngularJs之$scope对象(成效域)
  • Angular.js之功效域scope”@”,”=”,”&”实例详解
  • 关于angularJs指令的Scope(作用域)介绍
  • AngularJS入门教程之Scope(功效域)
  • AngularJs学习第陆篇从Controller调控器谈谈$scope效用域
  • 详解angularjs 学习之
    scope作用域

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有