Question

我使用Angular Material 1.1.1，AngularJS 1.5.8和Grunt使用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();
        }
    };
}]);

我做错了什么？这是我的Grunt任务：

    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

像这样添加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();
        }
    };
}]);

Answer 2

最终我找到了正确的解决方案。问题是依赖注入。

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

$ mdDialog无法使用ngtemplates

2 个答案: