AngularJS：無法弄清楚為什么在使用transclude：'element'進行轉換時嵌套的角度指令不被渲染

Question

我有一個名為“ panel”的自定義指令。

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

我的問題是我無法獲取嵌套面板指令進行渲染。 請查看plunkr http://plnkr.co/edit/D0LfQqBViuraSNfmym4g?p=preview以獲取JavaScript。

我預計

<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。 我正在探索將指令用作收集數據並將其提供給控制器的一種方法，以便可以從控制器提供的數據中渲染模板。 結果，我正在尋找一個不在div上使用ng-transclude而是使用$ compile和或transclude（scope，fun ...）的組合來實現所述目標的解決方案。 我的目的還在於更好地了解$ compile和transclude（scope，fun ...）如何有效使用。

Answer 1

這不會很簡單，因為您願意依靠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() 。

真正的問題開始了： 我們如何知道綁定何時完成

AFAIK，我們不知道確切的時間。 但是要解決此問題，我們可以使用$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);
      });
    }
  }
});

柱塞示例： http ://plnkr.co/edit/BBbWsUkkebgXiAdcnoYE?p=preview

我在插件中留了很多console.log() ，您可以看看實際發生了什么。

PS。 如果您不使用ng-bind-html而只允許DOM操作或使用@WilliamScott的答案中的類似內容，則事情會容易得多。

Answer 2

簡化指令會導致我認為您想要的是：

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);
    }
  }  
})

這是一個笨拙的人 。