AngularJS:我弄不明白为什么嵌套的angular指令在transclude:'element'时

AngularJS : Can't figure out why nested angular directive does not get rendered when transcluding with transclude:'element'

本文关键字：transclude 指令 element angular 我弄 明白 为什么 嵌套 AngularJS      更新时间：2023-09-26

我有一个自定义指令叫做" panel "。

<panel title="One Title">
    One Body
    <panel title="Two Title">two</panel>
</panel>

我的问题是，我不能得到嵌套面板指令渲染。有关javascript，请参阅plunkr http://plnkr.co/edit/D0LfQqBViuraSNfmym4g?p=preview。

,我希望

<div>
    <h1>One Title</h1>
    <div>
        One Body
        <div>
            <h1>Two Title</h1>
             <div>Two Body</div>
            </div>
        </div>
    </div>
</div>
但我得到的却是 
<div>
    <h1>One Title</h1>
    <div>One Body</div>
</div>

您将看到，我的目的是呈现来自控制器提供的数据的输出，而不是操纵dom。我正在探索将指令用作收集数据并将其提供给控制器的一种方法，这样模板就可以根据控制器提供的数据进行呈现。因此，我正在寻找一种解决方案，不使用ng-transclude在一个div，而是使用$compile和/或transclude(范围，乐趣…)的一些组合来实现既定的目标。我的目的也是为了更好地理解如何有效地使用$compile和transclude(scope, fun…)。

这并不简单，因为您愿意依赖ng-bind-html。

让我们先看看这个:

transclude(scope, function(clone, scope){
  panelCtrl.setBody($sce.trustAsHtml(clone.html()));  
});

上述函数中的clone将包含子panel指令的注释占位符，如下所示:

One Body
<!-- panel: undefined -->

这是因为子面板指令有transclude: 'element'，并且它的链接功能还没有运行。

要解决这个问题很容易，只需稍微修改一下代码: 
var clone = transclude(scope, function () {});
panelCtrl.setBody($sce.trustAsHtml(clone.html()));

这样clone将包含一个真正的模板，像这样:

One Body
<div class="ng-scope"><h1 class="ng-binding">{{panel.title}}</h1><div class="inner ng-binding" ng-bind-html="panel.body"></div></div>

不那么奇怪，我们现在有一个真正的模板，但是绑定还没有发生，所以我们现在仍然不能使用clone.html()。

真正的问题开始了:我们如何知道绑定何时完成

老实说，我们不知道确切的时间。但是为了解决这个问题，我们可以使用$timeout !

通过使用$timeout，我们打破了正常的编译周期，所以我们必须找到一些方法让父面板指令知道子指令的绑定已经完成(在$timeout中)。

一种方法是使用控制器进行通信，最终代码看起来像这样: 
app.controller('PanelCtrl', function($scope, $sce) {    
  $scope.panel = {
    title: 'ttt',
    body: $sce.trustAsHtml('bbb'),
  }
  this.setTitle = function(title) {
    $scope.panel.title = title;
  };
  this.setBody = function(body) {
    $scope.panel.body = body;
  };
  var parentCtrl,
      onChildRenderedCallback,
      childCount = 0;
  this.onChildRendered = function(callback) {
    onChildRenderedCallback = function () {
      callback();
      if (parentCtrl) {
        $timeout(parentCtrl.notify, 0);
      }
    };
    if (!childCount) {
      $timeout(onChildRenderedCallback, 0);
    }
  };
  this.notify = function() {
    childCount--;
    if (childCount === 0 && onChildRenderedCallback) {
      onChildRenderedCallback();
    }
  };
  this.addChild = function() {
    childCount++;
  };
  this.setParent = function (value) {
    parentCtrl = value;
    parentCtrl.addChild(this);
  };
});
app.directive('panel', function($compile, $sce, $timeout) {
  return {
    restrict: 'E',
    scope: {},
    replace: true,
    transclude: 'element',
    controller: 'PanelCtrl',
    require: ['panel', '?^panel'],
    link: function(scope, element, attrs, ctrls, transclude) {
      var panelCtrl = ctrls[0];
      var parentCtrl = ctrls[1];
      if (parentCtrl) {
        panelCtrl.setParent(parentCtrl);
      }
      var template =
        '<div>' +
        '  <h1>{{panel.title}}</h1>' +
        '  <div class="inner" ng-bind-html="panel.body"></div>' +
        '</div>';
      var templateContents = angular.element(template);
      var compileTemplateContents = $compile(templateContents);
      element.replaceWith(templateContents);
      panelCtrl.setTitle(attrs.title);
      var clone = transclude(scope, function () {});
      panelCtrl.onChildRendered(function() {
        panelCtrl.setBody($sce.trustAsHtml(clone.html()));
        compileTemplateContents(scope);
      });
    }
  }
});

示例Plunker: http://plnkr.co/edit/BBbWsUkkebgXiAdcnoYE?p=preview

我在活塞里留了很多console.log()，你可以看看到底发生了什么。

p。如果你不使用ng-bind-html，只允许DOM操作或使用@WilliamScott的答案中的东西，事情会容易得多。

简化指令的结果是我认为你要的:

app.directive('panel', function(){
  return {
    restrict: 'E',
    template:'<div><h1>{{panel.title}}</h1><div ng-transclude></div></div>',
    scope: {},
    transclude: true,
    controller: 'PanelCtrl',
    link: function(scope, element, attrs, panelCtrl)
    {
      panelCtrl.setTitle(attrs.title);
    }
  }  
})
相关文章：