使用其內容作爲模板的指令

Question

我在構建使用其內容作爲模板的指令時遇到了問題。在這種特殊情況下，該指令正在調用一個web服務來獲取一些子元素。內部html可能會或可能不會有ng重複。以下是部分，歸結爲簡化它們：

<div my-children="1"> 
    {{children.length}} 
     <ul> 
     <li ng-repeat="kid in children"> 
      {{kid.name}} 
     </li> 
     </ul> 
</div> 

我的期望是，無論是具有指令屬性會被編譯並使用該模板的元素中。

的指令（簡體）是：

app.directive('myChildren', function($compile, $timeout) { 
    return { 
    restrict: 'A', 
    scope: { 
     myChildren: '=' 
    }, 
    compile: function(tElement, tAttrs, transclude) { 
     tElement.append(transclude(tElement)); 
    }, 
    link: function(scope, element, attr) { 
     scope.children = []; 

     scope.safeApply = function(fn) { 
     var phase = this.$root.$$phase; 
     if (phase == '$apply' || phase == '$digest') { 
      if (fn && (typeof(fn) === 'function')) { 
      fn(); 
      } 
     } else { 
      this.$apply(fn); 
     } 
     }; 

     scope.$watch('myChildren', function(newVal) { 
     if (!newVal) return; 
     // mock our service call with timeout 
     $timeout(function() { 
      scope.children = [{ 
      id: 1, 
      name: "one" 
      }, { 
      id: 2, 
      name: "two" 
      }]; 
      scope.safeApply(); 
     }, 400) 

     }); 
    } 
    } 

}) 

這是一個非工作的例子：http://plnkr.co/edit/ZidQ4oBdpYxdg5Fyqe0P?p=preview

Answer 1

這比我想象的要簡單得多。

 template: function (tElement, tAttrs) { 
      return tElement.html(); 
     } 

http://plnkr.co/edit/nzvl83hlmjqO0uy08T9h?p=preview

Answer 2

試試這個

Example using directive template

我沒有使用transclude，我通常把我所有的html都放在模版或模版中

如果我需要'動態'改變我的html基礎，我會建立一個不同的指令，並使用ng-switch或ngShow/ngHide它更容易調試