Der richtige Weg, um eine Winkelreglerabhängigkeit in ein angular.ui-Modal zu injizieren

folgende Winkel.ui Modal Beispiel zeigt die modalInstance Aufruf einer ModalIntanceCtrl welches später erstellt als eine Funktion:

var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

Ich habe 2 Fragen/Probleme:

die docs empfehlen, eine Steuerung in einer anderen Art und Weise (durch Verkleinerung Ausgaben) zum Beispiel:

myApp.controller('GreetingCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);

Aber wenn ich den controller so aus, wie könnte ich es Injizieren in die modalInstance?

Den controller nenne ich hier nicht ein Modal-Instanz-controller aber meine Globale loginCtrlist das ein problem? sollte ich eine Unterklasse irgendwie die loginCtrl oder rufen es aus dem ModalInstanceCtrl? und wenn ja - wie genau?

Bin ich froh, für die Führung und die clarfication über diese.
Danke!

InformationsquelleAutor der Frage alonisser | 2013-10-21

angularjs angularjs-scope

30

Frage ist nicht ganz klar, aber wenn Sie erklären controller mit der Modul-API, dann können Sie den controller, um den modal-service als string
```
myApp.controller('ModalInstanceCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
```
controller: 'ModalInstanceCtrl',

Dasselbe kann man für loginCtrl wenn Sie verwenden möchten, die in der modal-service.

InformationsquelleAutor der Antwort Chandermani

Erstellt habe ich dieses plunker für diejenigen wie mich, die sich gerne ein Beispiel sehen. Es zeigt, wie eine modale ohne Verschmutzung der globalen namespace. Hoffentlich ist es hilfreich.

Bearbeitet, die code enthalten Beispiel als pro bummi's Kommentar unten

index.html

<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js">    </script>
<script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"     rel="stylesheet">
  </head>
  <body>

<div ng-controller="appController">
    <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3>I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <span>Message:{{message}}</span>
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

<button class="btn btn-default" ng-click="showModal()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

app.js

angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
  function($rootScope) {
    this.data = {};
    this.data.message = 'This is a message from a service';
    this.data.items = ['item1', 'item2', 'item3'];
  }
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
  function($scope, $modalInstance, dataService) {
    $scope.data = dataService.data;
    $scope.message = dataService.data.message;
    $scope.items = dataService.data.items;

    $scope.selected = {
      item: $scope.items[0]
    };

    $scope.ok = function() {
      $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function() {
      $modalInstance.dismiss('cancel');
    };

  }
]).
controller('appController', ['$scope', '$modal', '$log', 'DataService',
  function($scope, $modal, $log, dataService) {

    $scope.data = dataService.data;

    $scope.showModal = function() {
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'myModal'
      });

      modalInstance.result.then(function(selectedItem) {
        $scope.selected = selectedItem;
      }, function() {
        $log.info('Modal dismissed at: ' + new Date());
      });

    };

  }
]);

InformationsquelleAutor der Antwort Mikt25

4

Hatte ein ähnliches Problem und erklärte die modal-controller, ohne die it um das Modul, so wie dieses:
```
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { ... }
```
Ohne andere änderungen erforderlich, diese syntax funktioniert bei Verkleinerung als auch.

InformationsquelleAutor der Antwort Mark Meyerovich

Den einfachen Weg, dies zu tun ist, verwenden Sie $injizieren:

 
//injizieren der controller mit den folgenden Abhängigkeiten 
ModalInstanceCtrl.$inject = ['$scope', '$modalInstance', 'items'];

Ändern Sie die controller-Methode, um eine benannte Funktion :

 
Funktion ModalInstanceCtrl($scope, $modalInstance, items) { 
$Umfang.items = items; 
$Umfang.gewählt = { 
item: $scope.items[0] 
}; 

$Umfang.ok = function () { 
$modalInstance.close($Umfang.ausgewählt.item); 
}; 

$Umfang.cancel = function () { 
$modalInstance.entlassen ("Abbrechen"); 
}; 
};

Ich geschrieben habe, einen blog-Artikel zu diesem Thema, und gehört, wie zum schreiben von tests für die Richtlinien, die $injizieren:

übergang-eckig-2-0-Teil-2

InformationsquelleAutor der Antwort Jesse Sanders

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.