Question

我有一个指向单个弹出元素的指令。根据点击的数百个元素中的哪一个，我需要在显示时将不同的数据传递给弹出窗口。使用服务存储/获取数据似乎是一个边带黑客。将数据存储在我的顶级控制器中并允许弹出控制器继承似乎是不好的封装。我想在指令中有一个隔离范围，并让弹出控制器从中继承。这似乎不起作用。有什么想法吗？ $ broadcast是我唯一的选择吗？

Answer 1

我假设您正在使用AngularJS 1.x.我认为指令Transclusion是您正在寻找的。 Transclusion提供了一种方法，可以在指令的内容区域内包含绑定到父控制器的标记。

查看Plunker取得的AngularJS documentation。

 .directive('pane', function() {
    return {
      restrict: 'E',
      transclude: {
        'title': '?paneTitle',
        'body': 'paneBody',
        'footer': '?paneFooter'
      },
      template: '<div style="border: 1px solid black;">' +
                  '<div class="title" ng-transclude="title">Fallback Title</div>' +
                  '<div **ng-transclude="body"**></div>' +
                  '<div class="footer" **ng-transclude="footer"**>Fallback Footer</div>' +
                '</div>'
    };

<div ng-controller="ExampleController">
  <input ng-model="title" aria-label="title"> <br/>
  <textarea ng-model="text" aria-label="text"></textarea> <br/>
  <pane>
    <pane-title><a ng-href="{{link}}">{{title}}</a></pane-title>
    <pane-body><p>{{text}}</p></pane-body>
  </pane>
</div>

Pane是指令。请注意，pane-title和pane-body中包含的内容是针对父控制器编译的，但显示在指令标记的ng-transclude部分中。

您应该可以使用此功能将自定义数据放入弹出窗口，而无需服务或广播。

将数据动态传递给指令的transcluded控制器

1 个答案: