具有两个模板容器的指令

Directive with two template containers

本文关键字：指令 两个      更新时间：2023-09-26

我正在尝试创建一个"版本"指令：

$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。

这里：http://jsfiddle.net/0ckbz2n7/50/（不支持在one和many之间切换）

我已经杀了一整天，但在这个任务上取得了一些进展，正如你从 url 中看到jsFiddle的那样，这已经是版本 #50，这不是我尝试从头开始创建的第一个小提琴，除此之外我觉得我做错了方式，所以也许你们比我更有经验的人可以帮助我完成这项任务，因为我最终看不到光明的会议厅

我已经简化了你的代码很多。这是你想要的吗？

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/

相关文章：