CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
hollyquinn
hollyquinn

Reputation: 652

How to open modal window on button click in AngularJS

I can not figure out how to get a ui.bootstrap modal window to work with AngularJS. I'm getting the error messagse: Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal <- AdvancedSearchCtrl

Here's the code:

(function () {


angular.module('crm.ma')
    .controller('AdvancedSearchCtrl', function ($modal) {
    var vm = this;

    vm.openModal = function () {

        var modalInstance = $modal.open({
            templateUrl: 'app/components/common/advancedSearchModal.html',
            controller: advancedSearchInstanceCtrl
        });

    };

    });

angular.module('crm.ma').controller('advancedSearchInstanceCtrl', function ($modalInstance) {

    var modal = this;        

    modal.cancel = function () {
        $modalInstance.close();
    };

});
})();


<div class="row">
<button ng-click="vm.openModal()">Add User</button>


<script type="text/ng-template" id="advancedSearchModal.html">
<div class="modal-header">
    <h3>Text for header</h3>
</div>
<div class="modal-body">
    Text for body
</div>
<div class="modal-footer">
    <button type="submit">Search</button>
    <button class="btn btn-warning" ng-click="modal.cancel()">Cancel</button>
</div>

My module code:

(function () {
'use strict';
var app = angular
    .module('crm.ma',
        [
            'ui.router',
            'ui.bootstrap',
            'angularUtils.directives.dirPagination',
            'toastr',
            'crm.ma.common',
        ]);
 })();

Upvotes: 0

Views: 1612

Answers (1)

jbrown
jbrown

Reputation: 3025

Also, you've defined modalInstance in 'AdvancedSearchCtrl' but haven't called it.

modalInstance.result.then(function(x) { do something here} );

Upvotes: 0

Related Questions