web-dev-qa-db-fra.com

angular-ui modal avec contrôleur comme syntaxe

J'utilise angular-ui-bootstrap-bower # 0.7.0 avec angular # 1.2.10 et lors de l'ouverture d'un modal dont le contrôleur est "à l'ancienne", tout fonctionne correctement.

Cependant, lorsque j'ai un contrôleur destiné à être utilisé avec le nouveau "contrôleur en tant que syntaxe", il ne fonctionne pas. Est-ce que angular-ui-bootstrap modal fonctionne avec contrôleur en tant que syntaxe ? Est-ce que la version 0.7 le supporte? Comment faire?

angular-uiangular-ui-bootstrap
23
Cotten

Vous pouvez utiliser la syntaxe ngController pour l'option "controller". Par exemple:

controller: 'modalController as modal'

Il y a un échantillon plunker

Code de plunker:

<!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="[email protected]" 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();
  }
})
49
zandroid

Définir la propriété 'controllerAs' dans $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 template 

    <h2> {{mdCtrl.title}}</h2>
0
pandian_Snkl

Si vous utilisez CoffeeScript, n'oubliez pas de explicitement return la fonction du contrôleur. 

Sinon, la dernière ligne sera renvoyée et vous obtiendrez une syntaxe controller as qui ne fonctionne pas et, accessoirement, sur cette page SO.

0
David Salamon