TypeError when adding array to scope in angularjs

Question

I am new to angular (and javascript). I am trying to build a directive and part of that I need to add an array to the directive's scope. My code for the directive looks something like this:

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

    }
});

When executing, I get

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)

If I replace the value for "sections" with a string or with a number, the error goes away. Is it possible to have an array as value of a property in the scope? If yes, how?

Devesh Sati · Accepted Answer · 2017-05-02 19:18:52Z

The scope object as seen in the directive is not a place to instantiate scope variables. The scope object comprises of key-value pairs which are supposed to map scope variables of directive to the variables of the controller in which the directive resides.

So, if the 'section' array contains a value that must be supplied to the directive from the controller, you need to define your array in the controller and bind it to the directive by passing the array name as the attribute and using the following construct:

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

And the controller should contain something like:

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

Which will be bound to the directive in the view. 'sections' will now be accessible as a scope property in your directive

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

On the other hand, if the array is local to the directive, you can declare it inside the link phase of the directive.

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

  }
});

Hope it helps.

Collectives™ on Stack Overflow

TypeError when adding array to scope in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related