AngularJS：指令和嵌入指令之间的范围访问

Question

我构建了一个模块化形式的小型演示，其中包含单独的输入指令。 它还具有表单值的预览，绑定到相同的控制器和范围。

导致问题的输入指令是嵌入在表单中的输入：

<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 更新了父范围， 而嵌入的输入没有。这就是为什么第一个电子邮件输入不起作用 其余的都可以。

如何让嵌入指令双向绑定？

谢谢！

Answer 1

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

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

如果您希望被嵌入的内容与容器具有相同的范围，您可以使用链接（）中的transcludeFn，如下面的 sn-p 而不是 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>