AngularJs：遍历数组内部指令以创建嵌套的指令集

Question

在 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)
             }
        };
      })

我还尝试将上述指令与下一版本的 link 函数一起使用：

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)
}

None 提供的代码解决了我的问题。您将在下面找到针对特定情况进行解释的示例：

Let's say that I had next object in the scope.type = [null,"int"]. Now I would like to use <type type='type'><type> and as a result of first evaluation I want to have sth like: <type type='type[0]'></type><type type='type[1]'></type> Further evaluation of those values should lead to some simpler form but right now it is not important.

我怎样才能达到这样的目的？

编辑

我什至尝试将负责迭代的部分代码提取到单独的指令中，但它仍然不起作用。代码：

更新类型指令中的 link 函数：

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>",
      };
    })

问题仍然存在，但由于 typeb 指令，生成的 html 仅包含下一部分： 

Answer 1

在模板中使用 ng-repeat

<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",
        ...
  })

Answer 2

你遇到的问题是  这是因为你的类型不包含任何值，当它在 typeb 指令中时

您的指令不应在视图中使用 scope.variable。范围变量将可以通过它们的名称直接访问，例如

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

将您的 link 代码更改为以下内容。

指令link

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)
}

谢谢。

AngularJs：遍历数组内部指令以创建嵌套的指令集

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

javascript

angularjs

angularjs-directive

angularjs-ng-repeat

ng-repeat

编辑