指令有兩個模板容器

Question

我試圖創建一個「版本」指令：

$scope.text = "Lorem ipsum"; 
$scope.target = ["a", "b", "c"]; 

<table> 
    <version array="target"> 
     <one> 
      <tr class="row"> 
       <td class="col">ONE {{version}}: {{ text }}</td> 
      </tr> 
     </one> 
     <many> 
      <tr class="row" ng-repeat="version in versions"> 
       <td class="col">MANY {{version}}: {{ text }}</td> 
      </tr> 
     </many> 
    </version> 
</table> 

它的作用很簡單，它只是替代的內視one或many元素定義的模板之一供給它的元素的數量。在我們的例子中，它叫做target。在數組包含一個元素的情況下，指令使用在one元素中定義的模板，如果使用在many元素中定義的模板更多。指令也限制爲不生成多餘的html元素，這樣我們就不會在表格內部出現一些奇怪的div。

HERE: http://jsfiddle.net/0ckbz2n7/50/（不支持one之間many切換）

我殺了一整天，但達到這一任務取得了一些進展，因爲你可以從jsFiddle URL這是版本＃50已經看到，它不是第一個小提琴，我試圖從頭開始創建，除了我覺得我做錯了方式，所以也許你們有比我更多的經驗可以幫助我完成這個任務因爲我看到沒有光結束室

Answer 1

我已經簡化了你的代碼相當多。這是你想要的嗎？

app.directive('version', function($compile) { 
     var oneTemplate = ''; 
     var twoTemplate = ''; 
     return { 
      restrict: 'E', 
      scope: true, 
      controller: function ($scope, $element, $attrs) { 
       $scope.$watchCollection($attrs['track'], function(newVal, oldVal) { 
        var template; 
        $element.empty(); 
        delete $scope.versions; 
        delete $scope.version; 
        if (newVal) { 
         if(newVal.length === 1) { 
          $scope.version = newVal[0]; 
          template = angular.element(oneTemplate); 
         } else { 
          $scope.versions = newVal; 
          template = angular.element(twoTemplate) 
         } 
         $element.append(template); 
         $compile(template)($scope); 
        } 
       }); 
      }, 
      compile: function(element, attr) { 
       oneTemplate = element.find('one').html(); 
       twoTemplate = element.find('many').html(); 
      } 
     }; 
    }) 

編輯：

它應該是$ watchCollection而不是$手錶，因爲你正在看的數組。如果你

<div class="table" ng-switch="target.length" ng-init="version = target[0]; versions = target"> 
    <div class="row" ng-switch-when="1"> 
     <div class="col">ONE {{version}}: {{ text }}</div> 
    </div> 
    <div class="row" ng-switch-default="" ng-repeat="version in target"> 
     <div class="col">MANY {{version}}: {{ text }}</div> 
    </div> 
</div> 

http://jsfiddle.net/0ckbz2n7/60/