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-model更新了父作用域，而赎回的输入则没有。这就是为什么第一个电子邮件输入不起作用的原因其余的都是。

如何让transcluded指令双向绑定？

谢谢！

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>

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

1 个答案: