javascript Angularjs 独立的指令范围，没有自己的模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20878830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs isolated scope for directives without own template
提问by summer.is.gone
I want to create reusable directive in AngularJS without own template. I also want to have isolated scope for that directive. What is the best practices for my approach? Why my example doesn't work as I expect?
我想在没有自己的模板的情况下在 AngularJS 中创建可重用的指令。我还希望为该指令设置隔离范围。我的方法的最佳实践是什么？为什么我的例子不像我期望的那样工作？
I expected that I could edit obj1 and obj2 from directives separately.
我希望我可以分别从指令编辑 obj1 和 obj2。
HTML:
HTML：
<div ng-controller="MyCtrl">
X1: {{ obj1.x }}, Y1: {{ obj1.y }}
X2: {{ obj2.x }}, Y2: {{ obj2.y }}
<hr>
Edit obj1:
<div draggable target="obj1">
<input type="text" ng-model="target.x">
<input type="text" ng-model="target.y">
</div>
Edit obj2:
<div draggable target="obj2">
<input type="text" ng-model="target.x">
<input type="text" ng-model="target.y">
</div>
</div>
JS:
JS：
angular.module("App", [])
.controller("MyCtrl", function($scope) {
$scope.obj1 = {
x: 10,
y: 20
};
$scope.obj2 = {
x: 30,
y: 40
};
})
.directive("draggable", function() {
return {
scope: {
target: "="
},
link: function(scope, el, attrs) {
console.log("scope: ", scope);
}
}
});
PLUNKR: http://plnkr.co/edit/Dw8IiFVSOZGjSTFGRMzZ
PLUNKR：http://plnkr.co/edit/Dw8IiFVSOZGjSTFGRMzZ
回答by Michal Charemza
The way your code is working now, is that the contents of each directive is bound to the parent scope, and not the isolated scope of the directive, so each targetis a reference to the same variable.
您的代码现在的工作方式是，每个指令的内容都绑定到父作用域，而不是指令的独立作用域，因此每个target都是对同一变量的引用。
What you'll need to do is to transcludethe contents of the directive. The usual use for this is that you want the contents to be in the parent scope of the directive, and not in the isolated scope. However, you want the content to be in the isolated scope of the directive. So you'll have to call the transcludefunction manually, and bind the contents to the isolated scope of the directive:
您需要做的是transclude指令的内容。对此的通常用途是您希望内容位于指令的父作用域中，而不是在孤立的作用域中。但是，您希望内容位于指令的隔离范围内。因此，您必须transclude手动调用该函数，并将内容绑定到指令的隔离范围：
.directive("draggable", function($compile) {
return {
transclude: true,
scope: {
target: "="
},
link: function(scope, element, attrs, ctrl, transclude) {
transclude(scope, function(clone) {
element.append(clone);
});
}
}
})
You can see this in this Plunker. One thing it doesn't do is $watchthe contents of the 'target' so I suspect it won't react to changes in the "target" attribute on the directive. This might be best left to another question.
您可以在此 Plunker 中看到这一点。它不做的一件事是$watch“目标”的内容，所以我怀疑它不会对指令上“目标”属性的变化做出反应。这可能最好留给另一个问题。
Edit: the use of transcludewas incorrect / overcomplicated. You can pass the scopein as the first parameter to properly bind the clone to the correct scope.
编辑：使用transclude不正确/过于复杂。您可以将scopein 作为第一个参数传递以将克隆正确绑定到正确的范围。
回答by Ivan Koshelev
Came here facing the same confusion. Apparently, the case is as follows.
来到这里面临同样的困惑。显然，情况如下。
Transclusion aside, only elements in a template for the directive will be bound to the isolated scope created by that directive. If you don't use a template - content of the element, on which the directive is declared, will bind as if isolated scope was not there.
除了嵌入之外，只有指令模板中的元素才会绑定到该指令创建的隔离范围。如果您不使用模板 - 声明指令的元素的内容将绑定，就像不存在隔离范围一样。
Here is a modified plunker from above that showcases this. http://plnkr.co/edit/WqEKkNAj4p2Rly51LBzC?p=preview
这是一个从上面修改的 plunker，展示了这一点。 http://plnkr.co/edit/WqEKkNAj4p2Rly51LBzC?p=preview
