I'm a new user of AngularJS and I'm getting stuck when I have to access to a variable in a controller from a directive inside a ng-repeat. I think it has to be something related to scopes.

Here's my fiddle: /

The 'MyCtrl' scope has two properties: "items", an array, and "thing", just a string.

function MyCtrl($scope) {
    $scope.items = [{id: 'item1'}, {id: 'item2'}];    
    $scope.thing = "thing";
}

So, if I create a directive and I want it to read the array's content, this one works perfectly:

<div my-directive ng-repeat="item in items" item='item'></div>

app.directive('myDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            item: '=item',
        },
        template: '<div>{{ item.id }}</div>'
    }
});

The HTML is refreshed properly.

But if I try to access to the "thing" variable from the directive, it is always read as "undefined".

app.directive('myDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            item: '=item',
            thing: '='
        },
        template: '<div>{{ item.id }} - Here is not the {{thing}}</div>'
    }
});

I think the problem has to be related to the scope child created in the ng-repeat, or maybe the variable is not being bound correctly.

However, If I use $parent.thing in the template, the variable is read and it's evaluated properly, but I don't know if that $parent is the ng-repeat scope or 'MyCtrl' scope.

1) What am I doing wrong?

2) Why is it needed to put the "item" element read in the ng-repeat as an attribute of the HTML element? I first thought "items" was in the parent scope, so when the isolated scope of the directive is created, I would just have to do something like "items: '='".

I'm a new user of AngularJS and I'm getting stuck when I have to access to a variable in a controller from a directive inside a ng-repeat. I think it has to be something related to scopes.

Here's my fiddle: http://jsfiddle/Zzb58/1/

The 'MyCtrl' scope has two properties: "items", an array, and "thing", just a string.

function MyCtrl($scope) {
    $scope.items = [{id: 'item1'}, {id: 'item2'}];    
    $scope.thing = "thing";
}

So, if I create a directive and I want it to read the array's content, this one works perfectly:

<div my-directive ng-repeat="item in items" item='item'></div>

app.directive('myDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            item: '=item',
        },
        template: '<div>{{ item.id }}</div>'
    }
});

The HTML is refreshed properly.

But if I try to access to the "thing" variable from the directive, it is always read as "undefined".

app.directive('myDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            item: '=item',
            thing: '='
        },
        template: '<div>{{ item.id }} - Here is not the {{thing}}</div>'
    }
});

I think the problem has to be related to the scope child created in the ng-repeat, or maybe the variable is not being bound correctly.

However, If I use $parent.thing in the template, the variable is read and it's evaluated properly, but I don't know if that $parent is the ng-repeat scope or 'MyCtrl' scope.

1) What am I doing wrong?

2) Why is it needed to put the "item" element read in the ng-repeat as an attribute of the HTML element? I first thought "items" was in the parent scope, so when the isolated scope of the directive is created, I would just have to do something like "items: '='".

• javascript
• html
• angularjs

Share Improve this question Follow asked Nov 9, 2013 at 23:52 JorgeJorge 22311 gold badge44 silver badges1010 bronze badges 1

• 1 If you use = then you have to pass the attribute like so thing="thing". – elclanrs Commented Nov 10, 2013 at 0:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

By assigning an object to it, you create an isolate scope. If you set scope : true, you can use it like in your example, if not you have to pass it as an attribute, like you did with item.

http://jsfiddle/Zzb58/2/

For an explanation of different modes of scope, you can read the directives section on this page: https://github./angular/angular.js/wiki/Understanding-Scopes

Generally but especially when working with inherited scope values, I would also highly remend using an object with a property set, instead of a simple string-variable, as this might lead to a detachment throughout the scopes due to how prototypical inheritance works.