模态显示第一次加载为空，第二次不加载

Question

编辑：我在这里重现了问题http://plnkr.co/edit/w6yJ8KUvD3cgOrr56zH3?p=preview

我是 angularjs 的新手，我正在尝试使用一些数据创建弹出模式..

我不明白为什么第一次打开它是空的，但第二次（依此类推）它很好。我的意思是 header 在那里。所以每次重新加载页面时，第一次都是空的。

你能看出我错过了什么吗？

ModalController.js:

angular.module("Modal")
.controller("ModalController",
[
    "$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
    function($scope, $uibModal, $log, ModalService, AuthenticationService) {
        AuthenticationService.GetCurrentWindowsUser(function(username) {
            $scope.username = username;
        });

        $scope.openModal = function () {
            AuthenticationService.GetItems($scope.username, function(items) {
                $scope.items = items;
            });

            $scope.animationsEnabled = true;
            $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'modals/items.html',
                controller: 'ModalInstanceController',
                size: 'lg',
                resolve: {
                    funds: function() {
                        return $scope.items;
                    }
                }
            });
        };
    }
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {

    $scope.items = items;

    $scope.ok = function() {
        $uibModalInstance.close();
    };

});

items.html:

<div class="container" ng-controller="ModalController">
<script type="text/ng-template" id="modals/items.html">
    <div class="modal-header">
        <h3 class="text-centered">items</h3>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">SELECT</button>
    </div>
</script>

</div>

Home.html:

<div class="container" ng-controller="ModalController">
<button type="button" class="btn btn-default" ng-click="openModal()">Large modal</button>
</div>

Answer 1

尝试以下方法

angular.module("Modal")
.controller("ModalController",
[
    "$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
    function($scope, $uibModal, $log, ModalService, AuthenticationService) {
        AuthenticationService.GetCurrentWindowsUser(function(username) {
            $scope.username = username;
        });

        $scope.openModal = function () {
            AuthenticationService.GetItems($scope.username, function(items)  {
                $scope.items = items;

                $scope.animationsEnabled = true;
                $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'modals/items.html',
                controller: 'ModalInstanceController',
                size: 'lg',
                resolve: {
                    items: function() {
                        return $scope.items;
                    }
                }
                });
            });


        };
    }
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {

    $scope.items = items;

    $scope.ok = function() {
        $uibModalInstance.close();
    };

});

会不会是她的决心被称为资金而不是物品被传递到你的 modalInstanceController

Answer 2

angular.module("Modal")
.controller("ModalController",
[
    "$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
    function($scope, $uibModal, $log, ModalService, AuthenticationService) {

      AuthenticationService.GetCurrentWindowsUser(function(username) {
            $scope.username = username;
        });

        $scope.openModal = function () {
            AuthenticationService
              .GetItems($scope.username, function(items)  {
                $scope.items = items;
                $scope.animationsEnabled = true;
               showModal();
            });
        };

      function showModal(){
         $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'modals/items.html',
                controller: 'ModalInstanceController',
                size: 'lg',
                resolve: {
                    funds: $scope.items
                    }
                });
      }
    }
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {

    $scope.items = items;

    $scope.ok = function() {
        $uibModalInstance.close();
    };

});

稍微重构一下。

可能会猜测您第一次调用模态 $scope.items 是空的，因为服务尚未完成。看看我的例子是否有效。在异步调用完成之前，问题会出现其他问题运行。第二次它使用之前的 $scope.items 数据。您应该尝试使用某种形式的承诺。还有你的服务是什么样的？

Answer 3

我设法通过删除我想显示的模态中的脚本标签来解决这个问题

    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>

http://plnkr.co/edit/D4B6puSS2Z9j4DPPBTWx?p=preview

模态显示第一次加载为空，第二次不加载

Modal shows empty first time loaded, second time not

modal-dialog

angularjs