CODEWITHSUNDEEP
angularjsmodal-dialog
MrProgram
MrProgram

Reputation: 5242

Modal shows empty first time loaded, second time not

EDIT: Ive recreated the problem here http://plnkr.co/edit/w6yJ8KUvD3cgOrr56zH3?p=preview

I'm new to angularjs and I'm trying to create a popupmodal with some data..

I can't understand why it is empty the first time I open it, but the second (and so on) its good. By good I mean that the header is there. So every time the page is reloaded it's empty the first time.

Can you see what I am missing?

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>

Upvotes: 2

Views: 3172

Answers (3)

MrProgram
MrProgram

Reputation: 5242

I managed to solve this by removing the script tag in my modal which I wanted to display

    <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

Upvotes: 2

Lee.Winter
Lee.Winter

Reputation: 710

Try the following

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();
    };

});

Could it be thet your resolve was called funds and not items as being passed into your modalInstanceController

Upvotes: 0

rtn
rtn

Reputation: 2034

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();
    };

});

Refactored it a bit.

Would hazard a guess that the first time you call the modal $scope.items is empty as the service has not finished. See if my example works. The problem will other stuff running before the async call is finished. The second time round it works as it is using the previous $scope.items data. You should try and use some form of promises. Also what dose your service look like?

Upvotes: 0

Related Questions