webentwicklung-frage-antwort-db.com.de

winkel-Ui-Modal mit Controller als Syntax

Ich verwende angle-ui-bootstrap-bower # 0.7.0 mit angle # 1.2.10 und wenn ein Modal geöffnet wird, bei dem der Controller ein "altmodischer" Controller ist, funktioniert alles einwandfrei.

Wenn ich jedoch einen Controller habe, der mit dem neuen "Controller als Syntax" verwendet werden soll, funktioniert er nicht. Funktioniert angle-ui-bootstrap modal mit Controller als Syntax ? Unterstützt es Version 0.7? Wie es geht?

angular-uiangular-ui-bootstrap
23
Cotten

Sie können die ngController-Syntax für die Option "Controller" verwenden. Zum Beispiel:

controller: 'modalController as modal'

Es gibt einen Sample Plunker

Code vom 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

Legen Sie die 'controllerAs'-Eigenschaft in $uibModal.open() fest.

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 () {
    });

in deiner Vorlage 

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

Falls Sie CoffeeScript verwenden, vergessen Sie nicht, die Controller-Funktion explizit return zu verwenden. 

Andernfalls wird die letzte Zeile zurückgegeben, und Sie erhalten eine controller as-Syntax, die nicht funktioniert, und auf dieser Seite SO.

0
David Salamon