AngularJS: Objects inside nested directives getting undefined?

Question

So, I have two directives, one that has a template file, which contains another directive of the same type.

The first directive looks like:

.directive('billInfo', function () {
    return {
        // scope: true,
        scope: {
            obj: '='
        },
        restrict: 'E',
        templateUrl: 'views/templates/bill-info.html',
        link: function (scope, element, attrs) {
            scope.status = scope.obj.getStatus();
            scope.bill = scope.obj;
        }
    }
})

And the template is pretty simple, something like;

<h4>
  <span class="glyphicon glyphicon-cutlery">
    {{bill.getTable()}}
  </span>
  <small><span class="time"></span></small>
  <div class="btn-group bill-btn">
      <bill-btns billobj="bill"></bill-btns>
  </div>
</h4>

The directive for billBtns looks like:

.directive('billBtns', function () {
    return {
        scope: {
            billobj: '='
        },
        restrict: 'E',
        template: '<div><div>koko{{status}}</div></div>',
        link: function (scope, element, attrs) {
            console.log(scope, scope.billobj);
            scope.status = scope.billobj.getStatus();
        }
    }
})

The problem is unexpected: scope.billobj turns out to be undefined. When I console log scope from within the link function of the billBtns directive, all seems ok: I can see billobj inside scope.

What is going on here? Am I doing something fundamentally wrong here?

EDIT: Template for billInfo

  <div draggable ng-repeat="(index, bill) in getEnq()" bill="bill" id="bill-{{bill.orderCode}}" class="container panel panel-default bill float-{{index%2}}" style="width:300px;" data-created="{{bill.getCreatedOn()}}">
    <bill-info obj="bill"></bill-info>
  </div>

I can maybe use scope.$parent.obj, since its present in the parent scope. But I'm not sure if that's the best way to go here. — Idkt
– Idkt, Commented Mar 12, 2014 at 8:57
your are passing bill as the bill-info parameter does it have a value pls confirm? — Rishul Matta
– Rishul Matta, Commented Mar 12, 2014 at 9:37
@RishulMatta if you meant if the scope can access the bill obj within the billInfo directive, then yes. — Idkt
– Idkt, Commented Mar 12, 2014 at 9:39

Idkt · Accepted Answer · 2014-03-12 09:43:32Z

0

I believe I've come to a solution, but I'm uncertain as to if this is the right practice. Here's what the new billBtns directive looks like:

.directive('billBtns', function () {
    return {
        restrict: 'E',
        template: '<div><div>koko{{status}}</div></div>',
        link: function (scope, element, attrs) {
            console.log(scope, scope.$parent.obj);
            scope.status = scope.$parent.bill.getStatus();
        }
    }
})

And that solves the problem. My suspicion is this, if we look at the billInfo directive again, I do something like:

    scope.bill = scope.obj; // woah?

I'd like to understand more about why this happens and why I can access scope.$parent.bill from a nested directive but not scope.$parent.obj without getting typeerrors. Or maybe thats just the way to cascade scopes.

answered Mar 12, 2014 at 9:43

Idkt

3,0034 gold badges29 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Objects inside nested directives getting undefined?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related