Pablo Christiano Pablo Christiano - 1 month ago 29
Javascript Question

$mdDialog could not load template with ngtemplates

I'm using Angular Material 1.1.1, AngularJS 1.5.8 and Grunt with grunt-angular-templates 0.5.7. After building my application my $mdDialog does not find the view. But I found it in my Template cache.

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


What am I doing wrong? This is my Grunt task:

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


*Edit
I got this error:

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


and this is what my cache looks like

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

Answer

Finaly I found a correct solution. The Problem was the dependency injection.

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

Google called the previous way as a "bad controller" and my build process expected a "good controller"

You could read about this here: https://docs.angularjs.org/api/ng/directive/ngApp