Angular Material - 多个 $mdDialog 窗口的嵌套控制器 - 不起作用答案

【问题标题】：Angular Material - nested controllers for multiple $mdDialog windows - not workingAngular Material - 多个 $mdDialog 窗口的嵌套控制器 - 不起作用
【发布时间】：2016-05-11 13:28:27
【问题描述】：

我不知道我是否只是在这里犯了一个愚蠢的错误（为此我提前道歉）。或者在 AngularJS 逻辑方面我缺少一些东西。所以，我有一个自定义的 $mdDialog，它是通过按下按钮触发的。从这个 $mdDialog 中，我需要打开 2 个不同的 $mdDialog 窗口，具体取决于用户所做的选择。当将控制器嵌套在同一个父控制器中时，这很好用（所以因为我正在使用 $mdDialog，所以我有很多控制器）。

一旦我想拆分这些控制器以实现代码可管理性，我无法将它们注入父控制器，并且 AngularJS 给了我一个 Unknown Provider 错误。这是我的索引文件，其中包含指向主模块和控制器的链接：

<script src="js/app.js"></script>
<script src="js/controllers/AppController.js"></script>
<script src="js/controllers/DatePickController.js"></script>

Angular 模块：

angular.module('demoApp', ['ngMaterial']);

“父控制器”（触发第一个 $mdDialog 窗口）：

angular
    .module('demoApp')
    .controller('AppController', ['$scope', '$mdDialog', 'DatePickController', 
    function($scope, $mdDialog, DatePickController){
        $scope.showConfirm = function(event) {
                  $mdDialog.show({
                         targetEvent: event,
                         templateUrl: 'templates/mainDialogTemplate.html',
                         controller: function($scope, $mdDialog, employee){
                         $scope.employee = employee;
                         $scope.closeDialog = function(){$mdDialog.hide();}
                         $scope.pickDate = function(){$mdDialog.show({
                                templateUrl:'templates/calendarDialogTemplate.html',
                                parent: angular.element(document.body),
                                clickOutsideToClose: true,
                                controller: 'DatePickController'
            })
         }
      },
        locals: {employee: $scope.userName}
     })
   };
}])

还有“子”控制器：有角度的 .module('demoApp') .controller('DatePickController', ['$scope', '$mdDialog', 函数($scope, $mdDialog){ $scope.cancel = function(){$mdDialog.cancel();} $scope.months = ['一月'，'二月'，'三月'，'四月'，'五月'，'六月'，'七月'，'八月'，'九月'，'十月'，'十一月'， '十二月'];

    //Open existing scorecard
    $scope.openScorecard = function(){$mdDialog.show({
        templateUrl: 'templates/scorecard.tmpl.html',
        parent: angular.element(document.body),
        clickOutsideToClose: true,
            controller: function($scope, $mdDialog) {
            $scope.cancel = function(){
                $mdDialog.cancel();
            }

            $scope.selectMonth = function(){
                $scope.editState = false;
                $http({
                    method: 'POST',
                    url: 'php/saveComments.php',
                    data : employee
                })
            }

            $scope.save = function(){
                $scope.editState = false;
                $http({
                    method: 'POST',
                    url: 'php/saveComments.php',
                    data : employee
                })
            }

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

那么有什么问题呢？

【问题讨论】：

你可以为此添加 codepen 或 plunkr 吗？
是的，我今天晚些时候会添加一个 plunkr。

标签： angularjs controller nested angular-material

【解决方案1】：

您不需要注入控制器。当您使用angular.controller('name', function() {...}) 声明它们时，您指定了一个名称。现在您只需使用名称来告诉对话框正在使用哪个控制器。

您已经在使用对话控制器的名称'DatePickController'。您的DatePickController 函数参数没有被使用，只需将其删除。注意区别，一个是字符串，一个是参数名。

【讨论】：