루프 내에서 상위 컨트롤러 데이터에 액세스하는 방법

Question

angularJS에 문제가 있습니다.

나는 루프를 실행하는 컨트롤러가 있습니다. 목록의 모든 요소에 대해 모든 정보가 표시됩니다.
모든 루프 안에 다른 컨트롤러가 추가되었습니다 (이미 모범 사례가 아닙니다).

내부 컨트롤러에서 외부 컨트롤러의 데이터에 액세스하려고합니다.
이제 HTML 코드 또는 컨트롤러의 자바 스크립트 코드에 메타 데이터를 할당하여 신경 쓰지 않아도됩니다. 내가 한 일을 여기

:

<div ng-controller="PostListCtrl"> 




     <div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12"> 
      <div class="galleryElement effect6"> 
       <div class="innerGalleryElement"> 
        <div> 
         <img class="img-responsive" src="" /><!--{{e.Post.cover}}--> 
        </div> 
        <div class="lowerBarHolder"> 
         <div class="float-left avatar"> 
          <div class="shadow"> 
           <img src="{{e.Post.author_avatar}} " /> 
          </div> 
         </div> 
         <div class="float-left description"> 
          {{e.Post.title}} <br /> 
          {{e.Post.author}} 
         </div> 
         <div ng-controller="PostHeart" class="likeHolder" ng-init="isActive={{e.Post.isActive}}"> 
          <button ng-click="toggleActive($index)" 
          ng-class="{true: 'loveButtonActive', false: 'loveButton'}[isActive]" 
           class="">&#x2764;</button> 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

이 코드 : 가정으로 ng-init="isActive={{e.Post.isActive}}이 작동하지 않습니다.
또한 data-myData="{{e.Post.isActive}}으로 할당하려고 시도했지만 런타임에 컨트롤러에서 myData에 액세스하려고 시도했을 때 해당 자리 표시 자의 대체에 액세스하는 대신 {{e.Post.isActive}} 문자열에 액세스합니다.

아이디어가 있으십니까? 템플릿에서 사용할 다음

yourModule.directive('postHeart', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      'e': '=', 
      'index': '=' 
     }, 
     controller: function($scope) { 
      var isActive = $scope.e.Post.isActive; 
      $scope.btnClass = isActive ? 'loveButtonActive' : 'loveButton'; 

      $scope.toggleActive = function(index) { 
       var postId = $scope.e.Post.id; // access data from the parent controller 
       // ... 
      }; 
     }, 
     template: "<button ng-click=\"toggleActive(index)\" ng-class=\"btnClass\">&#x2764;</button>" 
    }; 
}); 

:

Answer 1

지시문을 만들기 프롬프트 응답에 감사드립니다,

<div ng-controller="PostListCtrl"> 
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12"> 
    <div class="galleryElement effect6"> 
     <div class="innerGalleryElement"> 
      <div> 
       <img class="img-responsive" src="" /><!--{{e.Post.cover}}--> 
      </div> 
      <div class="lowerBarHolder"> 
       <div class="float-left avatar"> 
        <div class="shadow"> 
         <img src="{{e.Post.author_avatar}} " /> 
        </div> 
       </div> 
       <div class="float-left description"> 
        {{e.Post.title}} <br /> 
        {{e.Post.author}} 
       </div> 
       <post-heart e="e" index="$index" class="likeHolder"></post-heart> 
      </div> 
     </div> 
    </div> 
</div>