Angularjs使用ng-repeat隔离范围指令

Question

I'm trying to use directive on ng-repeat items each with an isolate scope but it isn't working. I'm looping through each item and coloring it red with the inboxuser-select directive. However, when I put the directive on, it doesn't show any of my scope values. What is the issue here? Thanks

html file

   <li class="inbox-chatter"  data-ng-    
        repeat="inboxuser in inboxusers">
        <p inboxuser-select selected={{inboxuser}}">{{inboxuser}}</p>
       </li>

directive.js

.directive('inboxuserSelect', function() {
return {
    restrict: 'A',
    scope: {
        selected: "@"
    },
    link: function(scope, element, attrs) {
   scope.selected.css('color','red');
    }

}
 });

Answer 1

The problem is that once you set an isolate scope on the directive then the whole DOM element has that isolate scope. So the inboxuser from your ng-repeat is no longer in scope when data binding occurs (it's on the parent scope).

One option is to set scope to true instead of using an isolate scope so you'll inherit everything from the parent scope.

Or you can stick with an isolate scope, but pass inboxuser in to the directive and display it using a template. Since you're already passing inboxuser in to the directive's scope through selected it'd be easy to just add this to your directive:

   template: '{{selected}}',

Also, by the way, you're missing a quote on your <p> . So this might work better for you (note I also removed {{inboxuser}} from within the <p> assuming you'll be using the template to display that instead):

  <p inboxuser-select selected="{{inboxuser}}"></p>

Answer 2

To be honest, I don't understand what you really need to do but I have a feeling that this design will not get you there.

However, I fixed your example just for the purposes of explaining how things work.

You can see it live here .

So... when you write:

scope: {
    selected: "@"
}

you are actually saying that my isolated scope will hold a single property named selected which will be of type string and will contain whatever {{inboxuser}} evaluates to. And not only this, whenever inboxuser changes in the outter scope, selected will also change in the inner, isolated scope. This is how '@' binding works.

Whatever you put nested in <p inboxuser-select selected="{{inboxuser}}"></p> , is binded to that isolated scope, which does not have an inboxuser property. So, it has to change to:

<p inboxuser-select selected="{{inboxuser}}">{{selected}}</p>

Finally, scope.selected.css('color','red'); should be changed to:

element.css('color','red');

The element argument in link function is the DOM element where the directive instance is applied. scope.selected is just a string.

I suggest you rething your overall design. If you need help, feel free to ask.

If it helps you, you can use AngScope , a tiny firebug extention i've written. It's just a quick way to inspect $scope instances associated to DOM elements inside firebug's DOM inspector.