代码之家 › 专栏 › 技术社区 › baju

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

ng-repeat angularjs-ng-repeat angularjs-directive angularjs javascript

1

baju · 技术社区 · 11 年前

在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> 作为第一次评估的结果,我想得到如下内容: <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>",
      };
    })

问题仍然存在,但由于 typeb 指令: 

2 回复 | 直到 10 年前

1

Pankaj Parkar 11 年前

你遇到的问题是  这是因为类型在内部时不包含任何值 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)
}

谢谢

2

0

Peter Ashwell 11 年前

在模板中使用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",
        ...
  })