没有自己的模板的AngularJS隔离范围的指令

没有自己的模板的AngularJS隔离范围的指令

您的代码现在的工作方式是，每个指令的内容都绑定到父作用域，而不是指令的隔离范围，因此每个指令

target

都是对同一变量的引用。

您需要做的就是

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);      });    }  }})

您可以在此Plunker中看到这一点。它没有做的一件事是

$watch

‘target’的内容，因此我怀疑它不会对指令上“
target”属性的更改做出反应。这可能最好留给另一个问题。

编辑：使用

transclude

不正确/过于复杂。您可以将

scope

in作为第一个参数传递，以将克隆正确绑定到正确的作用域。