为什么我的AngularJS指令共享作用域？
我试图做一个简单的指令来显示名称并允许对其进行更改。当我在名称页上放置多个指令时，它们似乎都共享name属性。我究竟做错了什么？
<!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指令定义对象中的参数进行更改。
您可以在AngularJS文档的此部分中查看scope参数的文档：http :
//docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-
api_directive-definition-
object
此参数具有三个选项：
-
scope: false-共享指令包含的范围的默认行为 -
scope: true-为指令创建一个新的作用域，其作用类似于其他子作用域，并从其父作用域原型继承- 参见示例1
-
scope: {}-创建一个不从其父范围继承原型的隔离范围 -
参见示例2
从JSBin示例中可以看到，选项2和3都适用于您的示例。区别在于您是否要隔离新作用域。
AngularJS指南的指令部分中有一个很好的章节，说明了为什么隔离范围可以帮助使用指令创建更好的可重用模块：
AngularJS指南：隔离指令的范围
-
问题内容： 我想在以下两个指令之间共享： 在HTML中，我有： 我创建了具有隔离范围的名为“ directive1”的指令，并将名称“ table”分配给该属性。我无法在其他指令中访问此作用域属性。 那么，如何访问另一个指令的作用域呢？ 问题答案： 您可以对需要跨指令同步的项目执行操作。 或者，您可以将对象传递给指令1隔离范围，该范围将充当通信机制。在此对象上，如果更改子属性（如），则会影响父范围
-
问题内容： 我花了很多时间阅读AngularJS文档和一些教程，对于文档的难懂性，我感到很惊讶。 我有一个简单的，可以回答的问题，对于其他希望使用AngularJS的人也可能有用： 什么是AngularJS指令？ 某个地方应该有一个简单，精确的指令定义，但是AngularJS网站提供了这些令人惊讶的无用定义： 在主页上： 指令是AngularJS中可用的独特而强大的功能。指令可让您发明特定于您的应
-
问题内容： 我创建了一个包装jQuery插件的指令，并将该插件的配置对象从控制器传递到指令。（作品） 在配置对象中是一个我想在事件上调用的回调。（作品） 在回调中，我想修改控制器的$ scope上的属性，该属性 不起作用 。Angular无法识别出该属性由于某种原因而发生了变化，这使我相信回调中的$ scope与控制器的$ scope不同。我的问题是我不明白为什么。 有人能指出我正确的方向吗？ 单
-
问题内容： 我做了一个设计为使用ngModel指令附加到元素的指令。如果模型的值与某物匹配，则应将其设置为先前的值。在我的示例中，我正在寻找“ foo”，如果输入的是它，则将其设置回前一个。 我的单元测试在此方面通过的很好，因为它们仅查看模型值。但是在实践中，当“放回”触发器时，不会更新DOM。我们最好的猜测是，设置旧==新可以防止脏检查的发生。我逐步完成了$ setViewValueValue方
-
问题内容： 根据API文档，伪指令的属性已弃用，因此将来，所有伪指令的行为都将使用当前默认值。 这消除了开发人员替换element指令的element的能力，而没有明显替代此功能的能力。 有关如何使用元素指令和不使用元素指令的示例，请参见此示例。 为什么不推荐使用此有用的属性而不进行替换？ 问题答案： 在下一个主要的Angular版本中，将删除用于定义替换其所在元素的指令的标志。此功能具有难以理解
-
问题内容： ..如果您使用ng-model，则必须在某处有一个点。如果没有点，那么您就在做错误..” 但是，Angular.JS网站中的第一个示例（基础知识）似乎与此矛盾。是什么赋予了？自从MTV聚会以来，Angular.JS是否已更改，因为它现在对ng- model更宽容了？ 问题答案： 在处理范围继承的复杂性时，这个小点非常重要。 该egghead.io视频“点”有一个很好的概述，做到这一点非