AngularJSで$ mdDialog Angular Materialサービスを読み込む方法は？

Question

Angular Materialライブラリを使用していますが、$ mdDialogを動作させることができません。私は私がロード/サービスを正しく注入しているかどうかはわかりません。

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 
     ); 

エラーが

Uncaught TypeError: Cannot read property 'show' of undefined 

私が間違っているのかについての任意の考えである：ここでは

は、コードのですか？私は別のページでは、コントローラの下で同じ機能を使用する場合、それは次のコード

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]を動作することを

注意。

$ mdDialog APIドキュメントのURLを助けてください：https://material.angularjs.org/latest/api/service/ $ mdDialog

Answer 1

私は100％わからないんだけど、これを試してみてください。私が家に帰ると、もう一度チェックします。私は個人的にこれがサービスではなくコントローラに残されるべきだと思っています。

$ mdDialogを2回定義しました。ショーアラートでは、それを3番目の引数として渡します。私はそれを親要素と置き換えました。サービスは実際にページ上の要素を取得すべきではありません。

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

ブライアンは言ったように、その約$ mdDialogをダブルです。関数の引数に入れているので、コントローラから渡されていないので、nullと呼ばれます。

もう1つ注意しなければならないのは、メッセージ変数でtargetEventを指定していることです。

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

そして、このようなHTML：

.targetEvent(message) 

材料のウェブサイトからの例によると、あなたはそこ

.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) 
     ) 
    } 
}) 

あなたのコントローラは次のようになりますクリックイベントを渡す必要があります：

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

サービスが呼び出されたときにコンテナが常にページ上にあることを確認します。