Passing ng-repeat local object to directive controller is not working

Question

I'm trying to pass my

ng-repeat

local object to directive. I need to access the data from that object inside my directive controller. I'm confused about

iso-lated scope

and controller scope. Why it's not working.

Demo Fiddle about what I'm trying

HTML

<div ng-app="my-app" ng-controller="MainController">



    <div ng-repeat="document in documents">

        <name-row 

            document-element="document">

        </name-row>

    </div>

</div>

Directive

module.directive('nameRow', function() {

    return {

        restrict: 'E',

        replace: true,

        scope: {

            documentElement : '=document',



        },

        controller: function($scope) {

            console.log($scope.documentElement);

        },

        template:

'        <ul>' +      

'            <li>' +

'                <a>' +

'                    {{documentElement.targetPrice}}' +

'                </a>' +

'            </li>' +

'        </ul>'

    };

});

I just want to understand why it's not working. I don't want to do with any alternatives like accessing this in link function etc.

Answer 1

You used alias for attribute =document, You attribute should be document instead of document-element.

<div ng-repeat="document in documents">
    <name-row 
        document="document">
    </name-row>
</div>

Other way would be you could remove an alias of attribute in isolated property declaration.

scope: {
   documentElement : '=', //just have `=` instead of `=document`
},