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

【问题标题】：Creating Modal Popup using AngularJS and Bootstrap使用 AngularJS 和 Bootstrap 创建模态弹出窗口
【发布时间】：2015-10-07 04:21:38
【问题描述】：

您好，我正在尝试创建一个简单的模式对话框，当用户单击按钮时会弹出该对话框。我是 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代码。请帮忙！

【问题讨论】：

打开 plunker 并查看控制台错误
@PetrAveryanov 你的意思是在 Chrome 中查看控制台吗？我对plnkr不是很熟悉。这只是我第二次使用它。
@PetrAveryanov 我明白你现在的意思了。我纠正了控制器中的错误。现在，当应用程序加载时，我只是得到一个空白页面。
1.我仍然看到旧的 plunk 2。angular-ui.github.io/bootstrap - 在这里你可以找到示例并链接到工作 plunk。 3. 始终在控制台中查找错误。 4. $modal.open 只是创建了几个 div——如果你没有模态，那么你可能忘记包含 bootstrap.css

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

【解决方案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

【讨论】：