CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
cjds
cjds

Reputation: 8426

AngularJS = scope in an = scope causing parse syntax error

I'm trying to implement a 2 level hierarchy using directives in Angular. The first scope venture gets passed an JSON array of ventures. In every venture there is an array of positions. The second scope ideally pick up this position object and fill it in. 

    app.directive('venture',function(){
    return {
        restrict: "E",
        template: '<div><div ng-show="!ventureshow">{{details.venture_name}}'
                +'<positions data="{{details.positions}}" ></positions>'
                +'...',
        scope: {
            details:'='
        },
        replace: true,
        link:function($scope, element, attrs){
        }

    }
});

app.directive('positions',function(){
    return {
        restrict: "E",
        template:'d<ul ng-repeat="position in details">{{position}}<li>{{position.position_name}}:{{position.position_description}}</li></ul>',
        scope:{
            data:'='
        }
    }

})

However the equal (=) symbol on the second object causes an error $parse:syntax. Can't seem to figure out what's causing the issue

Upvotes: 1

Views: 933

Answers (2)

Hazarapet Tunanyan
Hazarapet Tunanyan

Reputation: 2865

Beacuse if you use 2 ways binding way (=),you must pass him variable,not the value of variable,beceause andgular directive needs a variable(place) to change something,to write something on.

Upvotes: 0

PSL
PSL

Reputation: 123739

Two way binding needs binding on a property which can be assigned to. You are instead providing an interpolated value by doing data="{{details.positions}}" which cannot be assigned to (unless you have a property on the scope with the same as that of the result of interpolation). You must be getting an un-assignable exception. Remove {{ interpolations from binding when you do two way binding.

i.e

template: '<div><div ng-show="!ventureshow">{{details.venture_name}}'
            +'<positions data="details.positions" ></positions>'

Upvotes: 1

Related Questions