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看到的那样这已经是版本＃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而不是$ 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/

带有两个模板容器的指令

1 个答案: