コンテンツを取得できません。ngrepeat内のAngularJs動的ポップオーバー

Question

ページ上の任意の場所をクリックすると、クリックして移動する小さなポップオーバーを表示する必要があります。

しかし、この要件に一致したplunker（http://plnkr.co/edit/K7cYQSDEBS3cHvDfJNLI?p=preview）が見つかりましたが、ng-repeatの内部で動作することができませんでした。

私はいくつかの回答とPlunkerの例を見ましたが、これを動作させることはできませんでした。ここ

はここに私のHTML

<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(); 
}); 

}です。

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

ここでの問題は、あなたがhere続きを読むcreates a new scopeng-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人の$親を取りました。あなたのシナリオでは、2つ必要です。必要な数を確認する方法は、console.log($scope)を使用し、次にコンソール（F12）を開いてから正しい$スコープを見つけるまでオブジェクト$parentのプロパティをトラバースします。その後、トラバースするの番号が必要です。

PS：

あなたがこれを行うことができます別の方法は、あなたがcontroller as構文を使用して、正しい範囲にアクセスすることができ、この方法は、あなたのコードの大幅な書き換えが必要になるため、私はGISTを提供します、あります。ここで

はSO私はこれがあなたの問題を修正期待し、それを

SO Answer

を行うための方法を与えるの答えです。