如何在AngularJS中单击按钮时打开模态窗口

时间:2015-10-27 13:32:42

标签: angularjs angular-ui-bootstrap

我无法弄清楚如何使用ui.bootstrap模式窗口来使用AngularJS。我收到错误消息:错误:[$ injector:unpr]未知提供者:$ modalProvider< - $ modal< - AdvancedSearchCtrl

以下是代码:

/Desktop$ phantomjs --ignore-ssl-errors=true check.js 
<html><head></head><body></body></html>
[object NodeList]
null

(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>

1 个答案:

答案 0 :(得分:0)

此外,您已经在&#39; AdvancedSearchCtrl&#39;中定义了modalInstance。但是没有把它叫做。

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