无法获取ngrepeat中的内容AngularJs动态弹出窗口

Question

我需要显示一个小的弹出窗口，在点击页面上的任意位置时点击打开。

我发现了一个符合此要求的运算器（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

这里的问题是，你正在使用ng-repeat这creates a new scope更多here。

由于复制与您的代码的问题是乏味的，我试图复制与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访问范围变量。在你的场景中，它也需要两个，检查需要多少的方法是使用console.log($scope)，然后打开控制台（F12），然后遍历对象$parent属性，直到找到正确的$范围。然后计算遍历的$parent的数量，这将是您所需的遍历数量$parent！

PS：

有你可以做到这一点的另一种方法，因为这种方法会需要你的代码的显著重写，我将提供GIST，您可以使用controller as语法和访问正确的范围。

这里是这样，请回答给人做

SO Answer

我希望这能解决你的问题的方法。