javascript - 在 Angular 1.3 中将对象注入(inject)到嵌入内容的范围中

Question

我想创建一个包含该指令可以绑定(bind)和修改的内容的指令。该指令具有隔离范围。我想象它的工作原理是这样的:

<my-directive bound-item-name="childObj">
  <input ng-model="childObj.someField">
</my-directive>

在运行时，我想使用childObj作为 my-directive 上的对象的别名的隔离范围称为 activeObject 。本质上，您可能会认为这与 ng-repeat 的方式类似。让您使用类似 obj as alias in objList 的语句并在嵌入内容中alias指的是单个实例。

我似乎不知道如何才能真正做到这一点...如果我将 transluded 内容更改为引用 $parent.activeItem它确实按照我的预期方式工作，但我觉得这期望嵌入的内容太多地了解该指令的工作原理。似乎在编译函数中进行修改可能会起作用，但我在文档中看不到如何实际使用嵌入的内容来做到这一点。强制嵌入的内容与指令共享其范围是可以的，尽管我没有看到任何证据表明有某种方法可以做到这一点。

这一定是可能的，但是如何实现呢？

再摆弄一下，我可以通过修改 scope.$$childHead[scope.boundItemName] 来让它工作。而不是使用scope.activeObject在指令中。虽然这有效，但如果可能的话，我希望不依赖未记录的内部对象。

Answer 1

指令的 link 函数被赋予 transclude 函数作为第 5 个参数。

link: function(scope, element, attrs, ctrls, transclude){
  // ...
}

此 transclude 函数采用您可以创建的作用域变量和另一个函数(称为“克隆链接函数”)，该函数将预链接的嵌入内容放置在 DOM 中。 transinclude 函数链接到您提供的作用域变量。

这是它的工作原理。

transclude: true,
scope: {}, // you are free to use whatever scope you need
link: function(scope, element, attrs, ctrls, transclude){

  var boundObj = {}; // your object
  var alias = attrs.boundItemName;

  // let's create an isolate scope for the transcluded content
  var newScope = scope.$new(true); 
  newScope[alias] = boundObj;

  transclude(newScope, function(preLinkContent){

     element.append(preLinkContent);
  });
}

然后，如果您使用了示例:

<my-directive bound-item-name="foo">
   <input ng-model="foo.text">
</my-directive>

然后，嵌入的 ng-model 将写入您的内部 boundObj 的 .text 属性。

<强> Demo