为什么我的 AngularJS 指令共享范围? [英] Why are my AngularJS directives sharing scope?
问题描述
我尝试制作一个简单的指令，显示名称并允许更改.当我在名称页面上放置多个指令时，它们似乎都共享名称属性.我做错了什么?
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>
推荐答案
正如在前面的回答中提到的，AngularJS 指令的默认行为是共享它们所包含的范围.这个行为通过 scope 改变 指令定义对象中的参数.
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.
您可以在 AngularJS 文档的这一部分查看范围参数的文档:http://docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-api_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
这个参数有三个选项:
scope: false- 共享指令所包含的范围的默认行为
scope: false- the default behavior of sharing the scope the directive is included in
scope: true - 为指令创建一个新的作用域，它的作用类似于其他子作用域，并且原型继承自其父作用域
scope: true - create a new scope for the directive that acts like other child scopes and prototypically inherits from its parent scope
- 参见示例 1
scope: {} - 创建一个独立的作用域，该作用域通常不继承自其父作用域
scope: {} - create an isolated scope that does not prototypically inherit from its parent scope
- 参见示例 2
正如您在 JSBin 示例中看到的，选项 2 和选项 3 都适用于您的示例.区别在于您是否希望隔离您的新范围.
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.
AngularJS 指南的指令部分有一个很好的部分，说明为什么隔离作用域可以帮助使用指令创建更好的可重用模块:AngularJS 指南:隔离指令的范围
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屋！
