Jay Shukla Jay Shukla - 3 months ago 13
Javascript Question

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

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

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`
},