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

我想在AngularJS中创建无需自己模板的可重用指令。我还希望该指令有单独的作用域。我的方法的最佳实践是什么？ 为什么我的例子没有像我期望的那样有效

我希望可以从指令中分别编辑obj1和obj2

HTML:

普朗克：

---

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

目标都是对同一变量的引用

您需要做的是

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

你可以。它没有做的一件事是

$watch

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

---

编辑：

transclude

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

作用域

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

来到这里时面临同样的困惑。显然，情况如下

撇开转换不谈，只有指令模板中的元素才会绑定到该指令创建的隔离作用域。如果不使用模板，则声明该指令的元素的内容将绑定，就像不存在隔离作用域一样

这是一个从上面改进的plunker，展示了这一点。

---

明白了！我试着去玩transclude，但没有效果。谢谢你有用的图案！谢谢你。我很好奇为什么Angular会这样做

transclude:true

，

通过tranclude链接

，并通过

范围调用
transclude
函数。这一定比现在的方式简单。我喜欢这个答案，谢谢。我有一个案例，我认为将标记移动到指令的模板中是不合逻辑的，但仍然能够操作DOM的这一部分。“它不能做的一件事是$watch'target'的内容——至少在编辑版本中，这样做很好。为什么不能使用模板？@Cherniv，这只是一个例子。实际的应用程序使用情况是这样的：
…
如果我对每个指令使用模板，代码看起来（更）难看和不可读。
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);
      }
    }
  });

.directive("draggable", function($compile) {
  return {
    transclude: true,
    scope: {
      target: "="
    },
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone) {
       element.append(clone);
      });
    }
  }
})