AngularJs:迭代指令内的数组以创建嵌套的指令集

AngularJs: Iterating over array inside directive in order to create nested set of directives

本文关键字：创建 嵌套 指令集 数组 AngularJs 迭代 指令      更新时间：2023-09-26

在angularJS指令中，我正在尝试迭代数组，并根据值创建嵌套的指令列表。指令的当前版本

指令类型 

    .directive("type", function($compile, $log){
        return{
            restrict: "E",
            replace: true,
            transclude: true,
            scope: {
                type: '='
            },
            template: "<div></div>",
            link: function(scope, element, attrs){
                if (angular.isArray(scope.type)){
                    angular.forEach(scope.type, function(value, index){
                        $log.error(value);
                        element.append("<type type='scope.type['"+index+"]'></type>");
                    });
                } else if (angular.isObject(scope.type)){
                    element.append("OBJECT")
                } else {
                    element.append("<div>{{scope.type}}</div>")
                }
                $compile(element.contents())(scope)
             }
        };
      })

我还尝试将上述指令与下一版本的链接功能一起使用：

if (angular.isArray(scope.type)) {
    element.append("<div ng-repeat='element in scope.type'><type type='element'></type></div>");
} else if (angular.isObject(scope.type)) {
    element.append("OBJECT")
} else {
    element.append("<div>{{scope.type}}</div>")
}
$compile(element.contents())(scope)
}

提供的代码都没有解决我的问题。您将在下面找到解释特定案例的示例：

假设我在scope.type = [null,"int"]中有下一个对象。现在我想使用<type type='type'><type>，作为第一次评估的结果，我希望有这样的sth： <type type='type[0]'></type><type type='type[1]'></type> 对这些值的进一步评估应该会导致一些更简单的形式，但现在这并不重要。

我怎样才能实现这样的目标？

编辑

我甚至试图将负责迭代的部分代码减去到单独的指令，但它仍然不起作用。法典：

更新类型指令中的链接函数：

link: function(scope, element, attrs) {
    if (angular.isArray(scope.type)) {
        element.append("<typeb type='scope.type'></typeb>")
    } else if (angular.isObject(scope.type)) {
        element.append("OBJECT")
    } else {
        element.append("<div>{{scope.type}}</div>")
    }
    $compile(element.contents())(scope)
}

新指令：

.directive("typeb", function($compile, $log){
      return{
          restrict: "E",
          replace: true,
          transclude: true,
          scope: {
              type: '='
          },
          template: "<div ng-repeat='t in type'>{{t}}</div>",
      };
    })

问题仍然存在，但生成的html仅包含由于typeb指令而包含以下部分： <!-- ngRepeat: t in type -->

你得到的问题是<!-- ngRepeat: t in type -->这是因为你的类型不包含任何值，当它位于指令typeb

你的指令不应该在视图上使用 scope.variable。范围变量将通过其名称直接访问，例如

{{type}}或<typeb type='type'></typeb>

将您的链接代码更改为下面。

指令链接 

link: function(scope, element, attrs) {
    if (angular.isArray(scope.type)) {
        element.append("<typeb type='type'></typeb>")
    } else if (angular.isObject(scope.type)) {
        element.append("OBJECT")
    } else {
        element.append("<div>{{type}}</div>")
    }
    $compile(element.contents())(scope)
}

谢谢。

在模板中使用 ng 重复

<your-directive attr="item.someattr" ng-repeat="item in items"></your-directive>
.directive("type", function($compile, $log){
    return{
        restrict: "E",
        replace: true,
        transclude: true,
        scope: {
            type: '='
        },
        template: "NG REPEAT HERE",
        ...
  })
相关文章：