CODEWITHSUNDEEP
angularjscoffeescriptangularjs-directiveangularjs-scope
dalyons
dalyons

Reputation: 1304

Angularjs isolate scope fails in undebuggable way

I am trying to use isolate scopes with an angular directive. Here's the HTML. You can assume I have a valid array in the objectivesJson property:

<div lesson-plan objectives="objectivesJson">
  <ul>
    <li ng-repeat="objective in objectivesCollection" >
      {{ objective.description }}
    </li>
  </ul>
</div>


At first I tried implementing my own 'isolation' via prototype scope & watches. This works, the list renders as expected:

  education.student.lessonPlan.directive = (Resource, $timeout) ->
  {
    restrict:   'A'
    scope: true
    controller: [ '$scope', '$element', '$attrs', ( $scope, $elem, $attrs ) ->

      $scope.$watch( $attrs.objectives, ( newValue ) ->
        $scope.objectivesCollection = newValue
      )

    ]
  }


But it's a bit of boilerplate, and as far as I understand, I should be able to achieve this with an isolate scope. Here's what I tried:

education.student.lessonPlan.directive = (Resource, $timeout) ->
  {
    restrict:   'A'
    scope: { objectivesCollection: '=objectives' }
    controller: [ '$scope', '$element', '$attrs', ( $scope, $elem, $attrs ) ->

    ]
  }

But it doesn't work, the UL list is empty in the DOM. There are no errors in the console, so I don't know what is going wrong, and there is nowhere to debug into. Any ideas? Perhaps I'm misunderstanding something about the 'scope' syntax?

Upvotes: 1

Views: 106

Answers (2)

Jesus Rodriguez
Jesus Rodriguez

Reputation: 12018

This could be confusing because is something that changed recently.

In 1.0.x (and 1.1.x) the isolated scope was leaking all over the place. So something like that:

<div foo bar>{{baz}}</div>

If foo has an isolated scope, that scope would be accessible inside bar and even accessible inside the div itself. That behavior was problematic so it was fixed recently in 1.2.x.

Now, if foo has an isolated scope, bar scope is still the parent scope (the controller in this case) and the same goes for what's inside the div itself ({{baz}} in our case).

So guessing that you're running the last Angular version. Only what's inside of your lesson-plan can access your isolated scope. That means that the scope of the ul is the controller itself. If you put that ul inside the directive's template (via template or templateUrl) then it will work.

Upvotes: 1

a better oliver
a better oliver

Reputation: 26828

The list is not part of your directive. And since the directive's scope is isolated it can only be accessed by the directive.

Upvotes: 0

Related Questions