为什么我的AngularJS指令共享范围？ [英] Why are my AngularJS directives sharing scope?
问题描述
我试图做一个简单的指令，它显示的名称，并允许它是变化的。当我把多个指令的名称页面上他们似乎都共享的name属性。我在做什么错了？
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset = UTF-8 /＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT; ＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.0-rc.3/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.0-rc.3/angular-resource.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.0-rc.3/angular-animate.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
VAR应用= angular.module（'应用'，[]）; app.directive（'人'，函数（）{ 功能链接（$范围，ELEM，ATTRS，CTRL）{ $ scope.name =老字号 $ scope.setName =功能（）{
$ scope.name ='新';
}
} 返回{
限制：'E'，
更换：真实，
模板：＆LT;跨度＆GT;当前的名字= {{名}}＆LT; A HREF =''类='BTN'NG点击='的setName（）'＆GT;更改名称和LT; / A＆GT;＆LT; BR＆GT;＆LT; /跨度＆gt;中，
链接：链接，
} }）; app.controller（'MainCtrl'，函数（$范围内）{}）; ＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;机身NG控制器='MainCtrl'＆GT;
＆LT;＆人GT;＆LT; /人＆GT;＆LT; BR＆GT;
＆LT;＆人GT;＆LT; /人＆GT;＆LT; BR＆GT;
＆LT;＆人GT;＆LT; /人＆GT;＆LT; BR＆GT;
＆LT;＆人GT;＆LT; /人＆GT;＆LT; BR＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
作为previous答案中提到，AngularJS指令的默认行为是分享它们包含在范围之内。这种行为是通过改变该指令定义对象范围参数。
您可以查看在AngularJS文件的这一部分的范围参数文件：<一href=\"http://docs.angularjs.org/api/ng.%24compile#description_com$p$phensive-directive-api_directive-definition-object\">http://docs.angularjs.org/api/ng.$compile#description_com$p$phensive-directive-api_directive-definition-object
这说法有三个选项：
-
的默认行为范围：假- 共享包含在指令中的范围， -
范围：真正的- 创建一个行为像从其父范围内其他子范围和继承中典型的指令一个新的范围- 请参见例1
-
范围：{}- 创建一个孤立的范围不中典型从其父继承范围- 请参见例2
你可以用JSBin例子看，这两个选项2和3会为你的工作为例。所不同的是，你是否希望你的新范围隔离或没有。
在AngularJS指南的指示部分对为什么孤立的范围可以帮助创建指令更好的可重用模块一个很好的部分：<一href=\"http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive\">AngularJS指南：隔离一个指令的范围
I've tried to make a simple directive which displays a name and allows it to be change. When I put multiple directive on the name page they all seem to share the name attribute. What am I doing wrong?
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<title></title>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-resource.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js"></script>
<script>
var app = angular.module('app', []);
app.directive('person', function () {
function link ($scope, elem, attrs, ctrl) {
$scope.name = "OLD"
$scope.setName = function() {
$scope.name = 'NEW';
}
}
return {
restrict: 'E',
replace: true,
template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>",
link : link,
}
});
app.controller('MainCtrl', function ($scope) { });
</script>
</head>
<body ng-controller='MainCtrl'>
<person></person><br>
<person></person><br>
<person></person><br>
<person></person><br>
</body>
</html>
As mentioned in previous answers, the default behavior of AngularJS directives is to share the scope that they are included in. This behavior is changed via the scope parameter in the directive definition object.
You can view the documentation for the scope argument in this section of the AngularJS documents: http://docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-api_directive-definition-object
This argument has three options:
scope: false- the default behavior of sharing the scope the directive is included inscope: true- create a new scope for the directive that acts like other child scopes and prototypically inherits from its parent scope- See Example 1
scope: {}- create an isolated scope that does not prototypically inherit from its parent scope- See Example 2
As you can see with the JSBin examples, both options 2 and 3 will work for your example. The difference is whether you want your new scopes isolated or not.
The directives section of the AngularJS guide has a good section on why isolated scope can help create better reusable modules with directives: AngularJS Guide: Isolating the Scope of a Directive
这篇关于为什么我的AngularJS指令共享范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
