我使用角度为-i-bootstrap-bower#0.7.0,角度#1.2.10,当打开控制器是“老式”的模态时,一切都正常。
但是,当我有一个控制器意图使用新的“控制器作为语法”它不工作。 angular-ui-bootstrap modal是否与controller as syntax配合使用? 0.7版支持吗?怎么做?
您可以使用ngController语法为“controller”选项。
例如:
例如:
controller: 'modalController as modal'
来自plunker的代码:
<!DOCTYPE html> <html> <head> <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script> <script src="script.js"></script> </head> <body ng-app="app" ng-controller="demoController as demo"> <h1>{{ demo.message }}</h1> <button class="btn btn-primary" ng-click="demo.modal()">Open modal</button> <script type="text/ng-template" id="modal.html"> <div class="modal-header"> <h3 class="modal-title">Modal window</h3> </div> <div class="modal-body"> <pre>{{ modal.modalText }}</pre> </div> <div class="modal-footer"> <button class="btn btn-default" ng-click="modal.cancel()">Cancel</button> </div> </script> </body> </html>
script.js
angular.module('app',['ui.bootstrap']) .controller('demoController',function($modal) { this.message = 'It works!' this.modal = function() { $modal.open({ controller: 'modalController as modal',templateUrl: 'modal.html' }); }; }) .controller('modalController',function($modalInstance) { this.modalText = 'Modal Text' this.cancel = function() { $modalInstance.dismiss(); } })