angular-ui modal avec le contrôleur comme syntaxe
j'utilise angular-ui-bootstrap-bower#0.7.0 avec angular#1.2.10 et quand j'ouvre un modal où le contrôleur est un modal "old fashioned", tout fonctionne très bien.
cependant, quand j'ai un controller destiné à être utilisé avec le nouveau "controller as syntax" il ne fonctionne pas. Fait angular-ui-modal bootstrap travail contrôleur de syntaxe<!--4? Ne version 0.7 de soutien? Comment faire?
3 réponses
vous pouvez utiliser la syntaxe ngController pour l'option "controller". Par exemple:
controller: 'modalController as modal'
il y a un plongeur d'échantillon
Code de 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();
}
})
dans le cas où vous utilisez CoffeeScript, n'oubliez pas d'indiquer explicitement return la fonction de contrôleur.
sinon, la dernière ligne sera retournée et vous finirez avec uncontroller as la syntaxe, et d'ailleurs, sur ce page.
Set 'controllerAs' propriété $uibModal.open()
var modalInstance = $uibModal.open({
animation:true,
templateUrl: '_myModal.html',
controller:['$scope' function($scope){
var mdCtrl=this;
mdCtrl.title="hello world";
}],
controllerAs:'mdCtrl', //set your custom controllerAs name
backdrop: 'static',
size: 'lg',
resolve: {
}
});
modalInstance.result.then(function (selectedItem) {
}, function () {
});
dans votre modèle
<h2> {{mdCtrl.title}}</h2>