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-repeat的数据，我们需要通过$index的{{1}}访问各个对象。请参阅以下示例。

Plunkr Demo

此处的问题是您使用ng-repeat ng-repeat 了解更多here。

由于用代码复制问题很繁琐，我尝试用plunkr复制问题！

<强>解决方案：

Plunkr Demo

您可以在creates a new scope内简单地定义一个新的控制器，如此

<强> HTML：

descriptionModal.html

<强> JS：

<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>

然后，我们将能够使用app.controller('tester', function ($rootScope, $scope) { console.log($scope.$parent.$parent.dynamicPopover.title); });访问父作用域，上面脚本中的html使用$parent来获取变量！

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

<强> P.S：

还有另一种方法可以做到这一点，因为这种方法需要重新编写代码，我将提供GIST，您可以使用$parent语法并访问正确的范围。

这是提供方法的SO答案

SO Answer

我希望这可以解决您的问题。

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

1 个答案: