javascript - 具有两个模板容器的指令

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>

它的行为非常简单，它只是替换一个或许多元素中定义的模板之一，具体取决于提供给它的元素数量。在我们的例子中，它被称为target。如果数组包含一个元素，指令将使用 one 元素中定义的模板，如果多个元素则使用 many 元素中定义的模板。指令还被限制为不产生多余的 html 元素，这样我们就不会在表格中出现一些奇怪的 div。

HERE: http://jsfiddle.net/0ckbz2n7/50/ (不支持one和many之间切换)

我已经杀了一整天，但在这个任务上取得了一些进展，正如你从 jsFiddle url 中看到的，这已经是版本 #50，它不是我试图创建的第一个 fiddle 从头开始，除此之外，我觉得我做错了，所以也许比我有更多经验的人可以帮助我完成这项任务，因为我在房间的尽头看不到光

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 而不是 $watch，因为您正在监视一个数组。

此外，如果您不想创建指令，您可以简单地使用 ng-switch:

<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/