ng-repeat 안팎에서 AngularJS 지시어 속성에 액세스하는 방법?

Question

다음 특성 지시문을 사용합니다.

<div class="col-sm-6 col-md-4" ng-repeat="item in items"> 

     <div auction-item-card data-auction-item="item" ></div> 

    </div> 

items.html라는 하나 개의보기에서 다음 HTML 마크 업 그리고 지시가있을 때 itemDetails.html

<div class="col-sm-6 col-md-4"> 
     <div auction-item-card data-auction-item="item"></div> 
    </div> 

라는 단지보기에 다음 HTML 마크 업으로

angular.module('app.directives.auctionItemCard', []) 
     .directive('auctionItemCard', function() { 
     return { 
      restict: 'A', 
      scope: { 
       auctionItem: '=', 
       actionWatch:'&' 
      }, 
      templateUrl: 'app/auctionTangoApp/template/itemTemplate.html', 
      link:function(scope, element,attrs) { 
       console.log(scope.auctionItem); 
      }, 
      controller: function ($scope) { 

        console.log($scope.auctionItem); 

       } 
      }; 
     }); 

ng-repeat 내부에서는 완벽하게 작동합니다. 그러나 지시문이 바깥 쪽이고보기의 제어기가 지시문 안에 항목 값을 설정하면 $ scope.auctionItem은 항상 정의되지 않습니다.

누군가 지시기가 ng-repeater 밖에있을 때의 차이점을 밝힐 수 있습니까? item가 정의되지 않은, 두 번째 예에서

var itemController = function ($scope, $routeParams,$location, $filter, $window, 
     $timeout, authService, productService) { 

     var itemId = ($routeParams.itemid) ? parseInt($routeParams.itemid) : 0; 


     function init() { 
      // $scope.item = {}; 
      productService.getProductById(itemId).then(function(item) { 
       $scope.item = item; 
      }); 
     }; 
     init(); 
    }; 

Answer 1

:

여기에 명확성을 추가하려면 항목 뷰의 컨트롤러 : 여기

var auctionItemsController = function ($scope, $location, $filter, $window, 
     $timeout, $routeParams, authService, auctionService, categoryService, productService) { 
     var auctionId = ($routeParams.auctionId) ? parseInt($routeParams.auctionId) : 0, timer; 

     $scope.items = []; 

     function init() { 
       getItems(); 
     } 


     function getItems() 
     { 
      productService.getProducts(auctionId, $scope.pageIndex, $scope.itemsPerPage).then(function (data) { 
       $scope.items = data.results; 

      }); 
     } 

     init(); 

    }; 

이 항목 세부 컨트롤러는. 그것은 ng-repeat ( item in items)에서만 정의됩니다.

Answer 2

O.k. 여기에 문제가 있습니다. 지시자가 컨트롤러 함수가 호출 될 때까지 ng-repeat 안에있을 때 angle은 이미 바인딩을 완료 했으므로 $ scope 변수가 설정됩니다. ng-repeat 외부에서 발생하지 않았기 때문에 내 변수가 비동기 호출 내부에 있었기 때문에 속성에 정의 된 범위 변수에 액세스하려고 시도하면 undefined가 반환 될 수 있습니다.

내 경매 항목의 내 이미지 URL에 대한 액세스를 얻기에 해결책은 NG 스타일이에 호출 된 함수를 수정 :이에 :

$scope.auctionItemImage = function(url) 
       { 

        return { 
         background: 'url(' + url + ')', 
         width: '100px', 
         height: '100px', 
         backgroundSize: 'cover', 
         margin: '0 auto' 
       } 
       }; 

다음 내 템플릿에이 줄을 수정을

다양한 시나리오에서 지침을 사용하려는 다른 사용자에게 도움이되기를 바랍니다.