javascript - Angularjs 隔离了没有自己模板的指令范围

Question

我想在 AngularJS 中创建可重用的指令，而不需要自己的模板。我还希望该指令具有独立的范围。我的方法的最佳实践是什么？ 为什么我的示例不能按我的预期工作？

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

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:

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

Answer 1

您的代码现在的工作方式是，每个指令的内容都绑定(bind)到父作用域，而不是指令的隔离作用域，因此每个 target 都是对同一个指令的引用变量。

您需要做的是嵌入指令的内容。这样做的通常用途是您希望内容位于指令的父作用域中，而不是位于隔离作用域中。但是，您希望内容位于指令的隔离范围内。因此，您必须手动调用 transclude 函数，并将内容绑定(bind)到指令的隔离范围:

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

您可以see this in this Plunker 。它不做的一件事是 $watch “目标”的内容，因此我怀疑它不会对指令上“目标​​”属性的更改使用react。这可能最好留给另一个问题。

编辑:transinclude 的使用不正确/过于复杂。您可以将范围作为第一个参数传递，以将克隆正确绑定(bind)到正确的范围。