javascript - AngularJS : Scope access between directives and transcluded directives

Question

我构建了一个模块化形式的小型演示，其中包含单独的输入指令。 它还可以预览绑定(bind)到相同 Controller 和范围的表单值。

导致问题的输入指令是嵌入到表单内的输入:

<mailer-form>
  <mailer-input form="mail" model="email">
    <input class="form-control" placeholder="Email" ng-model="mail.email">
  </mailer-input>
</mailer-form>

<mailer-preview></mailer-preview>

您可以在这里查看:

http://plnkr.co/edit/0FuzfOFFDN5XcNyZcpBv

问题是表单模板中的 ng-models 更新了父范围， 而嵌入的输入则不然。这就是为什么第一个电子邮件输入不起作用 其余的都是如此。

如何使嵌入的指令双向绑定(bind)？

谢谢!

Answer 1

ng-transclude 指令始终为嵌入的内容创建一个新的子作用域。

此处有一个请求 (https://github.com/angular/angular.js/issues/5489)，要求不要创建新范围，但尚未实现。

如果您希望嵌入的内容与容器具有相同的范围，您可以在 link() 中使用 transcludeFn (如下面的代码片段所示)而不是 ng-transclude。

link: function(scope, element, attributes, controllers, transcludeFn){
  transcludeFn(scope, function(nodes) {
    element.find('.transclude-here').append(nodes);
  })
}

并替换它们

<div ng-transclude></div>

与

<div class="transclude-here"></div>

有关完整示例，请参阅 http://plnkr.co/edit/WYCOxC9xBIOTUWPs2iAq?p=preview

编辑:如果您希望在多个地方实现此行为，您可以编写自己的自定义版本的 ng-transclude，如下所示:

app.directive('myTransclude', function () {
  return {
    restrict: 'EAC',
    link: function(scope, element, attrs, controllers, transcludeFn) {
      transcludeFn(scope, function(nodes) {
        element.empty();
        element.append(nodes);
      });
    }
  };
});

在 html 模板中:

 <div my-transclude></div>