$ mdDialog無法使用ngtemplates加載模板

Question

我正在使用Angular Material 1.1.1，AngularJS 1.5.8和Grunt with grunt-angular-templates 0.5.7。建立我的應用程序後，我的$ mdDialog沒有找到視圖。但是我在模板緩存中找到了它。

angular.module('app').controller("myController", ["$mdDialog", function($mdDialog) { 
    $scope.showDialog = function() { 
     $mdDialog.show({ 
      controller: myModalController, 
      templateUrl: '/views/directives/modal/myModal.html', 
      parent: angular.element(document.body), 
      clickOutsideToClose: true 
     }).then(function() { 
      //success action 
     }, function() { 
      //fail action 
     }); 
    } 

    var myModalController = function($scope, $mdDialog) { 
     $scope.hide = function() { 
      $mdDialog.hide(); 
     } 
    }; 
}]); 

我在做什麼錯？這是我的步兵任務：

ngtemplates: { 
     dist: { 
      options: { 
       module: 'app', 
       htmlmin: '<%= htmlmin.dist.options %>', 
       usemin: 'scripts/scripts.js', 
       prefix: '/' 
      }, 
      cwd: '<%= yeoman.app %>', 
      src: 'views/**/*.html', 
      dest: '.tmp/templateCache.js' 
     } 
    } 

*編輯 我得到這個錯誤：

vendor.f56bbb37.js:5 Error: [$injector:unpr] Unknown provider: aProvider <- a 

，這就是我的緩存看起來像

angular.module("app").run(["$templateCache",function(a){ 
    a.put("/views/directives/modal/myModal.html",'<div>this is my modal</div>') 
}]); 

Answer 1

最後我找到了一個正確的解決方案。問題是依賴注入。

angular.module('app').controller("myController", ["$mdDialog", function($mdDialog) { 
    $scope.showDialog = function() { 
     $mdDialog.show({ 
      controller: ['$scope', '$mdDialog', function($scope, $mdDialog) { 
       $scope.hide = function() { 
        $mdDialog.hide(); 
       } 
      }], 
      templateUrl: '/views/directives/modal/myModal.html', 
      parent: angular.element(document.body), 
      clickOutsideToClose: true 
     }).then(function() { 
      //success action 
     }, function() { 
      //fail action 
     }); 
    } 
}]); 

谷歌稱以前的方式作爲一個「壞控制器」和我的構建過程預計「好控制器」

你可以讀到這個位置： https://docs.angularjs.org/api/ng/directive/ngApp

Answer 2

添加targetEvent這樣的，試試吧並讓我知道：

angular.module('app').controller("myController", ["$mdDialog", function($mdDialog) { 
    $scope.showDialog = function(ev) { 
     $mdDialog.show({ 
      controller: myModalController, 
      templateUrl: '/views/directives/modal/myModal.html', 
      parent: angular.element(document.body), 
      targetEvent: ev, 
      clickOutsideToClose: true 
     }).then(function() { 
      //success action 
     }, function() { 
      //fail action 
     }); 
    } 

    function myModalController($scope, $mdDialog) { 
     $scope.hide = function() { 
      $mdDialog.hide(); 
     } 
    }; 
}]);