Question

我是角度（和javascript）的新手。我正在尝试构建一个指令，并且我需要在指令的范围中添加一个数组。我的指令代码如下所示：

.directive("startupSections", function(){
    return {
        restrict: "E",
        transclude: true,
        scope: {
            title: "@",
            sections: [1,2,3]
        },
        link: function(scope, elem, attrs){
            console.log (scope);
        }

    }
});

执行时，我

TypeError: definition.match is not a function
    at angular.js:7992
    at forEach (angular.js:417)
    at parseIsolateBindings (angular.js:7987)
    at parseDirectiveBindings (angular.js:8028)
    at addDirective (angular.js:9984)
    at collectDirectives (angular.js:9142)
    at compileNodes (angular.js:8974)
    at compileNodes (angular.js:8990)
    at compileNodes (angular.js:8990)
    at compile (angular.js:8859)

如果我用字符串或数字替换“sections”的值，则错误消失。是否可以将数组作为范围中属性的值？如果是，怎么样？

Answer 1

在指令中看到的scope对象不是实例化范围变量的地方。范围对象包含键值对，它们应该将指令的范围变量映射到指令所在的控制器的变量。

因此，如果'section'数组包含必须从控制器提供给指令的值，则需要在控制器中定义数组并通过将数组名称作为属性并使用它将其绑定到指令以下构造：

scope: {
        title: "@",
        sections: "="
    },

控制器应包含以下内容：

$scope.sectionsArray = [1,2,3]

将绑定到视图中的指令。 'sections'现在可以作为指令

中的范围属性访问

<startup-sections title='SomeTitle' sections="sectionsArray" >

另一方面，如果数组是指令的本地数组，则可以在指令的链接阶段内声明它。

.directive("startupSections", function(){
return {
    restrict: "E",
    transclude: true,
    scope: {
        title: "@"
    },
    link: function(scope, elem, attrs){
        scope.sections = [1,2,3]
        console.log (scope);
    }

  }
});

希望它有所帮助。

将数组添加到angularjs

1 个答案: