UI Bootstrap Modal 弹出窗口无法在 AngularJS 中正常工作

UI Bootstrap Modal popup not working correctly with AngularJS

本文关键字：常工作 工作 AngularJS Modal Bootstrap 窗口 UI      更新时间：2023-09-26

我的代码是这样的

    angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [ '$scope', '$modal',
    function($scope, $modal) {
        var data = [];
        data.push("first message");
        this.openReprintModal = function() {
            var modalInstance = $modal.open({
                templateUrl: 'ReprintModal.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    items: function() {
                        return data;
                    }
                }
            });
        };
        this.openReprintModal();
    }
]);
angular.module('RateRequestApp.controllers').controller('ModalInstanceCtrl', function($scope, $modalInstance) {
    $scope.ok = function() {
        $modalInstance.close();
    };
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});
  <div id="RateRequestApp" class="content" ng-app='RateRequestApp' ng-controller="ReadOnlyController">
 <script type="text/ng-template" id="ReprintModal.html">
                <div class="modal-header">
                    <h3 class="modal-title">Check this out</h3>
                </div>
                <div class="modal-body">
                    <ul>
                        <li ng-repeat="item in items">
                            <span>{{ item }}</span>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" ng-click="ok()">OK</button>
                    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                </div>
            </script>
        </div>

所有工作正常，除了模态正文中没有显示任何消息。显然一切都有效，除了"

<li ng-repeat="item in items">
        <span>{{ item }}</span>
 </li>`

这部分不起作用。任何人都可以指出任何可能的原因。注意：我正在将这个用于模型：http://angular-ui.github.io/bootstrap/

你必须像这样将items对象注入到你的 ModalInstanceCtrl 中：

angular.module('RateRequestApp.controllers')
  .controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
    $scope.items = items;
    ...
});

然后，您可以在视图中访问它，就像现在一样

<li ng-repeat="item in items">
    <span>{{ item }}</span>
</li>
相关文章：