Wie wird der Angle-Material-Dienst $ mdDialog in AngularJS geladen?

Question

Ich benutze die Angular Material Bibliothek und kann den $ mdDialog nicht arbeiten. Ich bin mir nicht sicher, ob ich den Service richtig lade/einfülle. Hier

ist der Code:

var mainApp = angular.module("mainApp", ['ngRoute', 'ngMaterial']) 
    .config(['$routeProvider', function($routeProvider) {...omitted} ]) 
    .service('selectedStudentService', function() {...omitted} ]) 
    .service('appService', function($mdDialog){ 
     this.showAlert = function(title, message, $mdDialog) { 
     $mdDialog.show(
       $mdDialog.alert() 
       .parent(angular.element(document.querySelector('#popupContainer'))) 
       .clickOutsideToClose(true) 
       .title(title) 
       .textContent(message) 
       .ariaLabel() 
       .ok('OK!') 
       .targetEvent(messag 
     ); 

Der Fehler ist

Uncaught TypeError: Cannot read property 'show' of undefined 

Irgendwelche Gedanken auf, was ich falsch mache?

Beachten Sie, dass, wenn ich die gleiche Funktion unter einer Steuerung in einer anderen Seite verwenden es für mich wie mit dem folgenden Code

mainApp.controller('aController', function ($mdDialog) { 
    $scope.showAlert = function(title, message) { 
      $mdDialog.show(
      $mdDialog.alert() 
      .parent(angular.element(document.querySelector('#popupContainer'))) 
      .clickOutsideToClose(true) 
      .title('Success') 
      .textContent(message) 
      .ariaLabel('b') 
      .ok('OK!') 
      .targetEvent(message) 
      ); 
     }; 

} ok funktioniert;

Bitte helfen

$ mdDialog API Dokumentation URL: https://material.angularjs.org/latest/api/service/ $ mdDialog

Answer 1

Ich bin nicht 100% sicher, aber versuchen Sie dies. Wenn ich nach Hause zu einem Computer komme, werde ich es überprüfen. Ich persönlich denke, dass dies in einem Controller und nicht in einem Service verbleiben sollte.

Sie haben $ mdDialog zweimal definiert. In show alert übergeben Sie es als Ihr drittes Argument. Ich habe das durch das Elternelement ersetzt. Die Dienste sollten wirklich keine Elemente auf der Seite bekommen.

mainApp.service('appService', function($mdDialog){ 
    return { 
     showAlert: function(title, message, parentElement) { 
      $mdDialog.show(
       $mdDialog.alert() 
       .parent(parentElement) 
       .clickOutsideToClose(true) 
       .title(title) 
       .textContent(message) 
       .ariaLabel() .ok('OK!') 
       .targetEvent(message) 
      ); 
     } 
    }; 
}); 

Answer 2

Genau wie Bryan sagte, es ist über den doppelten $ mdDialog. Da du es in die Funktionsargumente steckst, hat es seinen Nullwert aufgerufen, da du es nicht vom Controller übergeben hast.

Eine andere Sache, die Sie beachten sollten, ist, dass Sie targetEvent mit Ihrer Nachrichtenvariablen angeben.

.targetEvent(message) 

Nach den Beispielen aus dem Material Website, sollten Sie die Veranstaltung klicken dort passieren

.service('appService', function ($mdDialog) { 
    this.showAlert = function (ev, title, message) { 
     $mdDialog.show(
      $mdDialog.alert() 
       .parent(angular.element(document.querySelector('#popupContainer'))) 
       .clickOutsideToClose(true) 
       .title(title) 
       .textContent(message) 
       .ariaLabel() 
       .ok('OK!') 
       .targetEvent(ev) 
     ) 
    } 
}) 

Ihr Controller sollte wie folgt aussehen:

.controller('someCtrl', function ($scope, appService) { 
    $scope.showAlert = function (ev, title, message) { 
     appService.showAlert(ev, title, message) 
    } 
}) 

und die HTML-wie diese :

<button ng-click="showAlert($event, 'I'm the title', 'I'm the message')">show</button> 

Stellen Sie sicher, dass sich der Container immer auf der Seite befindet, wenn der Service aufgerufen wird.