Передача переменной области действия в директиву

Question

Я могу видеть свои данные в console.log. Я просто не понимаю, почему я не могу получить к ней доступ с помощью $scope.$parent.locations. Что мне не хватает?

coupons.html

<div id="coupons-grid" coupons-repeater="locations"> 
</div> 

<!-- <p> When uncommented, below I can see all my location data <p> 
<p> {{ locations }} </p> --> 

директива

.directive("couponsRepeater", function() { 
    return { 
    compile: function(elem, attr) { 
     return function($scope, $element, $attr) { 
     console.log($scope.$parent); // in the console I see "locations" which is the data I need 
     console.log($scope.$parent[$attr.couponsRepeater]); // comes back undefined - this is the call I would like to use because it's dynamic 
     console.log($scope.$parent.locations); // comes back undefined 
     } 
    } 
    } 
}) 

CouponsCtrl

.controller('CouponsCtrl', function ($scope, $state, $http, $ionicLoading, userService) { 
    $scope.locations = {one:1, two:2, three:3}; 
}) 

Answer 1

Это потому $attr.couponsRepeater не определено, где attr.couponsRepeater имеет значение, которое вы ищете.

На стороне примечание, используя $parent для доступа к данным, это не очень хорошая идея, ваша директива должна использовать изолированную область, а родитель должен передавать данные через другие атрибуты. Example JSFiddle here.

app.directive("couponsRepeater", function() { 
    return { 
     restrict: 'A', 
     scope: { 
      locations: '=couponsRepeater' 
     }, 
     link:function (scope, ele, attrs) { 
      console.log(scope.locations); 
     } 
    } 
}); 

С HTML.

<div coupons-repeater="locations"> 
</div>