我试图使用Angular Bootstrap Modal伪指令(
http://angular-ui.github.io/bootstrap/)如下,在我的控制器中打开模态:
function customerSearch() { var modalInstance = $modal.open({ templateUrl: 'app/customer/customers.modal.html',controller: 'customers.modal' }); modalInstance.result.then(function(selectedCustomer) { console.log(selectedCustomer); }); }
在模态控制器中:
var controllerId = 'customers.modal'; angular.module('app').controller(controllerId,['$modalInstance',customersModal]); function customersModal($modalInstance) { // Modal controller stuff }
但是当我这样做,我得到以下错误:
Unknown provider: $modalInstanceProvider <- $modalInstance
如果我拿出$ modalInstance,它的工作,但我显然没有参考模态在呼叫控制器。
编辑
我不知道是否值得注意,但我使用Controller作为语法:
<div class="container-fluid" data-ng-controller="customers.modal as vm">
应用程序依赖:
var app = angular.module('app',[ // Angular modules 'ngAnimate',// animations 'ngRoute',// routing 'ngSanitize',// sanitizes html bindings (ex: sidebar.js) // Custom modules 'common',// common functions,logger,spinner 'common.bootstrap',// bootstrap dialog wrapper functions // 3rd Party Modules 'ui.bootstrap',// ui-bootstrap (ex: carousel,pagination,dialog) 'breeze.directives',// breeze validation directive (zValidate) ]);
我创建了一个plunker,它在这里显示的问题:http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview
问题是,你在两个地方指定一个控制器 – 当打开一个模态和模板 – 这不是必需的。从模板中删除ng-controller,事情将按预期工作:
http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview
http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview