无法在 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

更新：

要在popover 内容中显示ng-repeat 的数据，我们需要通过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获取变量！

请注意： 我花了两个 $parent 才达到访问范围变量所需的 $scope。在你的场景中它还需要两个，检查需要多少的方法是使用 console.log($scope)，然后打开控制台（F12），然后遍历对象 $parent 属性直到你找到正确的 $scope。然后统计遍历的$parent个数，就是你需要遍历的$parent个数！

P.S:

还有另一种方法可以做到这一点，因为这种方法需要对代码进行大量重写，我将提供 GIST，您可以使用 controller as 语法并访问正确的范围。

这是给出方法的 SO 答案

SO Answer

希望这能解决您的问题。

无法在 ngrepeat 中获取内容 AngularJs 动态弹出框

Unable to get content AngularJs dynamic popover inside ngrepeat

angularjs

angularjs-ng-repeat

popover