UI Bootstrap Modal popup not working correctly with AngularJS

Question

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/

Henri Hietala · Accepted Answer · 2014-12-09 13:59:27Z

2

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>

edited Dec 9, 2014 at 13:59

answered Dec 9, 2014 at 13:53

Henri Hietala

3,0411 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

UI Bootstrap Modal popup not working correctly with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related