有没有办法只使用子指令作为保存内容的占位符

Is there any way to just use a child directive as a placeholder for holding content?

本文关键字：保存 占位符 指令 有没有      更新时间：2023-09-26

我是 angularjs 的新手。 想看看是否有任何方法仅使用子指令作为占位符来保存内容，但用于真正呈现？

我不想在子指令中进行渲染，因为我想让父指令执行所有操作。 所以我可以在父指令中有一些其他的特殊逻辑。

angular.module('components', []).
directive('tabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope, $element) {
      var panes = $scope.panes = [];
      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      }
      $scope.createPane = function() {
        var pane = panes[panes.length - 1];
        var clonedPane = Angular.copy(pane);
        panes.push(clonedPane);
      }
      this.addPane = function(pane) {
        if (panes.length == 0) $scope.select(pane);
        panes.push(pane);
      }
    },
    template: '<div class="tabbable tabs-left">' +
      '<ul class="nav nav-tabs">' +
      '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
      '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
      '</li>' +
      '<li ng-class="addLink"><a ng-click="createPane()"><i class="icon-plus"></i> tab</a></li>' +
      '</ul>' +
      '<div class="tab-content">' +
      '<div ng-repeat="pane in panes" class="tab-pane" ng-class="{active: selected},{{pane.pclass}}" id="{{pane.id}}">' +
      '{{ pane.content }}' +
      '</div>' +
      '</div>' +
      '</div>',
    replace: true
  };
}).
directive('pane', function() {
  return {
    require: '^tabs',
    restrict: 'E',
    scope: {
      title: 'bind',
      pclass: 'bind',
      id: 'bind'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      var text = element.text();
      tabsCtrl.addPane({
        title: scope.title,
        pclass: scope.pclass,
        id: scope.id,
        content: text
      });
    }
  };
})

相应的 html 代码：

<tabs>
  <pane title="tab 1" id="tab1" pclass="tab">
    hello
  </pane>
  <pane title="tab 2" id="tab2" pclass="tab">
    world
  </pane>
</tabs>

我尝试了类似上面的东西，但没有任何东西被推入窗格。似乎从未调用过子指令（窗格）的链接函数。 因此，仅显示用于添加选项卡的链接。

有什么想法吗？

解决此问题

的最简单（尽管有点烦人）方法是为每个窗格提供一个模板。

在 html 中：

<tabs>
  <pane title="tab 1" id="tab1" pclass="tab" template="pane1-templ">
  </pane>
  <pane title="tab 2" id="tab2" pclass="tab" template="pane2-templ">
  </pane>
</tabs>
<script type="text/ng-template" src="pane1-template">hello</script>
<script type="text/ng-template" src="pane2-template>wolrd</script>

在您的指令中：

'<div class="tab-content">' + 
    '<div ng-repeat="pane in panes" class="tab-pane" ng-class="{active: selected},{{pane.pclass}}" id="{{pane.id}}">' + 
         '<div ng-include src="pane.template"></div>' +
    '</div>' +
'</div>'

或者..你有没有试过这样做来修复它？

在窗格中：

var html = elm.html();
//...
pane.html = html;

在选项卡中：

<div ng-bind-html-unsafe="pane.html"></div>

也许它不起作用的原因是因为在您的子指令中您没有模板。如果没有模板，指令不知道在何处以及如何呈现指令。

你可以做的是有这样的东西：

template : '<div style="display:none;" ng-transclude></div>'

在您的子模板中..

你的element.text()应该还能用！

如果没有模板，链接函数将永远不会获得element因此您的子指令将在那里失败。

使用上面的模板，它应该可以工作。

相关文章：