CODEWITHSUNDEEP
javascriptangularjs
None
None

Reputation: 5670

UI Bootstrap Modal popup not working correctly with AngularJS

My code is like this

    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>

All works Okay Except there is no message shown at the body of modal. Apparently everyhting works except `

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

This part is not working.Can any one point out any possible reason. Note: I am using this one for model :http://angular-ui.github.io/bootstrap/

Upvotes: 0

Views: 1617

Answers (1)

Henri Hietala
Henri Hietala

Reputation: 3041

You have to inject items object to your ModalInstanceCtrl like this:

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

And then you are able to access it in your view just like you have it now

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

Upvotes: 2

Related Questions