AngularJs，从嵌套ng-repeat内的指令访问父作用域

Question

That's a noob question. I'm looking for the correct way to access the parent scope inside a directive in a nested ng-repeat. This is exactly what i mean:

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="section in sections">
        {{section.Name}}
        <div ng-repeat="item in section.Items" ng-init="parent = section">
            <span class="menuItem">{{item}}</span>
        </div>
    </div>
</div>

And the directive:

myApp.directive('menuItem', function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            console.log(scope.$parent.section.SectionId);
        }
    }
});

The directive is attached to an item in the inner ng-repeat, and i need to access a property of the parent object. The problem is that i cannot access directly to the parent properties (with scope.$parent), because ng-repeat creates a new scope, and i must append the name of the object i set in the ng-repeat (in this case scope.$parent. section .):

<div ng-repeat="section in sections">

console.log(scope.$parent.section.SectionId);

JsFiddle: http://jsfiddle.net/7Lra7Loy/2/

As i want the directive to be generic, so it can be used inside other ng-repeat blocks, without being forced to use the same names in the ng-repeat, the only way i found is to use an ng-init, that would be the same in all ng-repeat blocks (ng-init="parent = section"):

<div ng-repeat="section in sections">
    {{section.Name}}
    <div ng-repeat="item in section.Items" ng-init="parent = section">
        <span class="menuItem">{{item}}</span>
    </div>
</div>

myApp.directive('menuItem', function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            console.log(scope.parent.SectionId);
        }
    }
});

JsFiddle: http://jsfiddle.net/7Lra7Loy/1/

Is there a better way to handle this situation? Or am i just missing something? I searched a bit, but i couldn't find anything really useful.

Answer 1

Template:

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="section in sections">
        {{section.Name}}
        <div ng-repeat="item in section.Items">
            <span class="menuItem" section="{{section}}">{{item}}</span>
        </div>
    </div>
</div>

And directive:

myApp.directive('menuItem', function () {
    return {
        restrict: 'C',
        scope: {
            section: '@' // text-binding
            //section: '&' //one-way binding
            //section: '=' //two-way binding
        },
        link: function ($scope, element, attrs) {
            console.log($scope.section);
        }
    }
});

JsFiddle: https://jsfiddle.net/nrkmn/26zhqbjg/