콘텐츠를 얻을 수 없습니다. ngrepeat 내부에 AngularJs 동적 팝업이 있습니다.

Question

페이지의 아무 곳이나 클릭하면 딸깍 소리가 나면서 열리는 작은 팝업을 표시해야합니다.

그러나이 요구 사항과 일치하는 plunker (http://plnkr.co/edit/K7cYQSDEBS3cHvDfJNLI?p=preview)가 발견되어 ng-repeat에서 작동하지 않습니다.

여러 답변과 플 런커 예제를 보았지만 작동시키지 못했습니다. 여기

는

<div ng-controller="TestController"> 
<div class="row" style="background-color: #ebebeb !Important; "> 
    <div style="text-align:center"> 
    <table style="width:100% !important;"> 
     <tr ng-repeat="member in TeamMembers" style="font-size:18px !important; height: 108px;"> 
     <td style="display:block;margin-top:30px;text-align:left;">&nbsp;{{member.FirstName}} {{member.LastName}} <i class="fa fa-info-circle" aria-hidden="true" ng-show="member.Description != null" popover-template="dynamicPopover.templateUrl" popover-placement="bottom" popover-elem descr="{{member.Description}}"></i></td> 
     </tr> 
    </table> 
    </div> 
</div> 

... 

<script type="text/ng-template" id="descriptionModal.html"> 
    <div class="adp-info-dialog"> 
     <div class="modal-body"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-1"> 
      <div class="form-group"> 
       <label class="fieldset-label">Test {{ dynamicPopover.descr }}</label> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</script> 

여기

는 JS

testApp.controller('TestController', function ($scope, $rootScope, $log, $modal, SiebelAccountTeamService, $filter, $element) { 
$scope.dynamicPopover = { 
    templateUrl: 'descriptionModal.html', 
    descr: null 
}; 
var result = TestService.GetTeamMembers(); 
result.then(function (data) { 
    $scope.TeamMembers = data.data; 
}, function (e) { 
    console.log(e); 
}).finally(function() { 
    $scope.CompleteLoading(); 
}); 

}) 내 HTML이고;

testApp.directive('popoverClose', function ($timeout) { 
return { 
    scope: { 
     excludeClass: '@' 
    }, 
    link: function (scope, element, attrs) { 
     var trigger = document.getElementsByClassName('trigger'); 

     function closeTrigger(i) { 
      $timeout(function() { 
       angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); 
      }); 
     } 

     element.on('click', function (event) { 
      var etarget = angular.element(event.target); 
      var tlength = trigger.length; 
      if (!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) { 
       for (var i = 0; i < tlength; i++) { 
        closeTrigger(i) 
       } 
      } 
     }); 
    } 
}; 

});

testApp.directive('popoverElem', function() { 
return { 
    scope: { 
     descr: '@' 
    }, 
    link: function (scope, element, attrs) {    
     $scope.dynamicPopover.descr = scope.descr, 
     alert($scope.dynamicPopover.descr), 
     element.on('click', function() { 
      element.addClass('trigger'); 
     });    
    }    
}; 

});

감사합니다.

Answer 1

는 업데이트 :

가 팝 오버의 콘텐츠 내부의 NG 반복의 데이터를 표시하기 위해, 우리는 ng-repeat의 $index을 통해 개별 개체에 액세스해야합니다. 아래의 예를 참조하십시오.

Plunkr Demo

여기서 문제는 creates a new scope이 here 자세한 내용을 ng-repeat을 사용하는 것입니다.

코드로 문제를 복제하는 작업이 지겹기 때문에 plunkr을 사용하여 문제를 재현 해 보았습니다!

솔루션 :

Plunkr Demo

당신은 단순히 descriptionModal.html

과 같이 HTML 내부에 새로운 컨트롤러를 정의 할 수 있습니다

<script type="text/ng-template" id="myPopoverTemplate.html"> 
     <div class="adp-info-dialog" ng-controller="tester"> 
     <div class="modal-body"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-1"> 
      <div class="form-group"> 
       <label class="fieldset-label">Test {{ $parent.$parent.dynamicPopover.content }}</label> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </script> 

JS :

app.controller('tester', function ($rootScope, $scope) { 
    console.log($scope.$parent.$parent.dynamicPopover.title); 
}); 

그런 다음, 우리가 $parent 사용하여 부모 범위에 액세스 할 수 있습니다, 위의 스크립트 내부의 HTML 변수를 얻기 위해 $parent를 사용!

참고 : 그것은 범위 변수에 액세스하는 데 필요한 $scope에 도달하는 날이 $ 부모를했다. 시나리오에서는 2 개가 필요하며, 필요한 수를 확인하는 방법은 console.log($scope)을 사용한 다음 콘솔 (F12)을 열고 정확한 $ 범위를 찾을 때까지 객체 $parent 속성을 탐색합니다. 그런 다음 통과 할 $parent의 필수 번호가 될 $parent의 번호를 계산하십시오!

PS :

당신이 할 수있는 또 다른 방법은 코드의 중요한 재 작성이 필요합니다이 방법은, 내가 GIST를 제공하기 때문에, 당신은 controller as 구문을 사용하고 올바른 범위를 액세스 할 수있다 .

다음은이 SO 그것을

SO Answer

나는 이것이 당신이 문제를 해결 희망을 할 수있는 방법을 제공하는 답변입니다.