以控制器为语法的 angular-ui 模式 [英] angular-ui modal with controller as syntax
问题描述
我正在使用 angular-ui-bootstrap-bower#0.7.0 和 angular#1.2.10，当打开控制器是老式"控制器的模式时，一切正常.
但是，当我有一个控制器打算与新的控制器作为语法"一起使用时，它不起作用.angular-ui-bootstrap modal 是否与 控制器语法?0.7 版本支持吗?怎么做?
您可以将 ngController 语法用于控制器"选项.例如:
controller: 'modalController as modal'有一个示例plunker
来自plunker的代码:
<头><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 src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script><script src="script.js"></script><body ng-app="app" ng-controller="demoController as demo"><h1>{{ demo.message }}</h1><button class="btn btn-primary" ng-click="demo.modal()">打开模态</button><script type="text/ng-template" id="modal.html"><div class="modal-header"><h3 class="modal-title">模态窗口</h3><div class="modal-body"><pre>{{modal.modalText }}</pre>
<div class="modal-footer"><button class="btn btn-default" ng-click="modal.cancel()">取消</button>
</html>
script.js
angular.module('app', ['ui.bootstrap']).controller('demoController', function($modal) {this.message = '它起作用了！'this.modal = function() {$modal.open({控制器:'modalController 作为模态'，templateUrl: 'modal.html'});};}).controller('modalController', function($modalInstance) {this.modalText = '模态文本'this.cancel = 函数(){$modalInstance.dismiss();}})I'm using angular-ui-bootstrap-bower#0.7.0 with angular#1.2.10 and when opening a modal where the controller is an "old fashioned" one, everything works fine.
However, when I have a controller meant to use with the new "controller as syntax" it doesn't work. Does angular-ui-bootstrap modal work with controller as syntax? Does version 0.7 support it? How to do it?
You can use the ngController syntax for the "controller" option. For example:
controller: 'modalController as modal'
There is a sample plunker
Code from 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();
}
})
这篇关于以控制器为语法的 angular-ui 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
