javascript - UI Bootstrap Modal 弹出窗口无法与 AngularJS 一起正常工作

标签 javascript angularjs

我的代码是这样的

    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/

最佳答案

您必须像这样注入(inject) items 对象到您的 ModalInstanceCtrl 中:

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

然后您就可以在 View 中访问它,就像现在一样

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

关于javascript - UI Bootstrap Modal 弹出窗口无法与 AngularJS 一起正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27380492/

相关文章:

javascript - 我想比较angularjs中输入文本框的旧值和新值是否相同?

javascript - 日历,按周分隔的天数列表

javascript - 加载 Ace 导致未捕获错误 : Mismatched anonymous define() module:

javascript - 当 AngularJS 触发 $onEval 时,有什么方法可以立即告诉这个范围内的哪些值发生了变化?

angularjs - 是否可以在同一个项目中有两个单独的 Angular 版本

angularjs - Googlebot 会正确处理 angularjs 页面的 <link rel ="canonical"ref ="{{url}}>"

javascript - 我可以在浏览器中使用 SVG 渲染特殊字符吗

javascript - 将循环结果插入数组

javascript - Bootstrap 3 : Click over button doesn't work

angularjs - 使用 ng-include 包含 html 文件时发生错误