使用AngularJS和Bootstrap创建模态弹出窗口

时间:2015-10-02 14:14:38

标签: angularjs twitter-bootstrap angular-ui-bootstrap bootstrap-modal

您好我正在尝试创建一个简单的模式对话框,当用户单击按钮时会弹出该对话框。我是Angular和Bootstrap的新手,我很难搞清楚它。我在这里创建了一个plnkr

(function () {
'use strict';

angular
    .module('crm.ma', ['ui.bootstrap'])
    .controller('AdvancedSearchCtrl', function ($modal) {
        vm.openModal = function () {
            var modalInstance = $modal.open({
                templateUrl: 'topnav_advancedmodal.html',
                controller: 'searchCtrl as modal'
            });
        }
    })

});

http://plnkr.co/edit/VgQqRIMGewuwQPnUxm87?p=catalogue

上面的plnkr代码。请帮忙!

1 个答案:

答案 0 :(得分:1)

您的代码存在多个问题。以下是其中一些:

<强>的JavaScript

(function() {
  "use strict";

  angular.module('crm.ma', ['ui.bootstrap']). // You define new module with angular.module('...', []) syntax. If module is already initialised, use angular module('...') instead
    controller('searchCtrl', function() {}). // Make sure this controller exists and registered in angular
    controller('advancedSearchCtrl', ['$modal',function ($modal) { // Use ['x', function(x) {...}] syntax
        this.openModal = function () { // vm -> this
            var modalInstance = $modal.open({
                templateUrl: 'topnav_advancedmodal.html',
                controller: 'searchCtrl as modal' // <- make sure searchCtrl controller exists and is registered
            });
        };
    }]);

}());

<强> Plunker

http://plnkr.co/edit/6X40tgEriHXTjBsfvkHy?p=preview