在 Angular 1.3 中将对象注入到嵌入内容的范围内

Question

我想创建一个指令，其中包含指令可以绑定和修改的嵌入内容。该指令具有隔离范围。我想它的工作原理是这样的：

<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 指的是单个实例。

我似乎无法弄清楚我实际上是如何做到这一点的...如果我将转换的内容更改为引用 $parent.activeItem 它确实按我的预期工作，但我觉得那是期待转换的内容对指令的工作原理了解太多。似乎在 compile 函数中进行修改可能会起作用，但我在文档中看不到如何使用嵌入的内容实际做到这一点。强制嵌入的内容与指令共享其范围是可以的，尽管我没有看到任何证据表明有某种方法可以做到这一点。

这一定是可能的，但是怎么做呢？

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

Answer 1

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

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

这个transclude 函数接受一个您可以创建的范围变量和另一个函数 - 称为“克隆链接函数” - 将预链接的嵌入内容放置在 DOM 中。 transclude 函数链接到您提供的范围变量。

这是它的工作原理。

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