Angular Directive - Scope returns 0 instead of value

Question

I have the following Angular directive:

var OrgChartDirective = function() {
    return {
        restrict: 'AE',
        scope: {
            source     : '=',
            container  : '=',
            stack      : '=',
            depth      : '=',
            interactive: '=',
            showLevels : '=',
            clicked    : '=' // We use '=' here rather than '&' for this callback function
        },
        link: function(scope, element, attrs) {
            var target = $(element);
            var source = $('#' + scope.source);
            var options = {
                container  : target,
                nodeClicked: scope.clicked,
                stack      : scope.stack,
                depth      : scope.depth,
                interactive: scope.interactive,
                showLevels : scope.showLevels
            };
            console.log("Drawing org chart at " + scope.source + " on " + target);
            console.log(scope);
            source.orgChart(options);
        }
    }
};

I add it to the page like:

<org-chart source='list-for-wf'/> or <div org-chart source='list-for-wf'> </div>

Problem is, in my console, I see:

Drawing org chart at 0 on [object Object]

Why is the source returning 0, this is like jquery when you try to access an invalid element. Even if I log the source as the first line of the link function it is 0

Why is that? I have tried data-source="..." and all kinds of stuff. Any ideas?

Implication of changing '=' to '@' is that you are happy for your source to be bound 1 way only. — AKrishan
– AKrishan, Commented Feb 3, 2016 at 13:50

Daniel Beck · Accepted Answer · 2016-02-03 13:49:56Z

3

Attributes are read as javascript expressions, so source="list-for-wf" is being interpreted as "the variable list minus the keyword for minus the variable wf". (I'm a bit surprised Angular doesn't throw an error on that keyword instead of returning zero, but hey.)

I think you want a quoted string instead: <org-chart source="'list-for-wf'">

edited Feb 3, 2016 at 13:49

answered Feb 3, 2016 at 13:37

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Directive - Scope returns 0 instead of value

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