如何在 AngularMaterials mdDialog 中使用我的 Angular 应用程序中定义的现有控制器？

里奇·里维（Ricky Levi）

所以我的问题是，我已经将控制器定义为

angular.module('starter.controllers')
 .controller('Test1Ctrl', function(){ ...
 .controller('Test2Ctrl', function(){ ...
 .controller('SettingsCtrl', function(){ ...

现在我想添加$mdDialog内部Test2Ctrl，问题是 - 我想传递给它controller:- 我已经在上面定义的实际控制器（ test1/test2/Settings 等..）

但似乎所有的例子——包括 AngularMaterials，都在创建一些被调用的子函数FunctionCtrl——并使用它——作为控制器？！

那么，如果我确实使用了会发生什么：controller: 'SettingsCtrl',- 它抛出一个 AngularJS 错误，即 Angular 被加载了不止一次......并且我在对话框中看到我的整个站点很小:)

这是我在外面看到的示例 - 而不是controller: 'DialogCtrl',- 我想使用SettingsCtrl或至少使用其中的功能，我不想再次编写代码......

angular.module('starter.controllers')
    .controller('testCtrl', function(){
        $scope.click = function(message){
            $mdDialog.show({
                controller: 'DialogCtrl',
                templateUrl: 'dialogInfo.html',
                targetEvent: ev,
                locals : {
                    message : message
                }
            })...
        }
        function DialogCtrl($scope, $mdDialog, message) {
            $scope.message = message;
        }
    );

高拉夫

下面是一个快速演示，它展示了对modal对话框的现有控制器的重用：

angular.module('myApp', ['ngMaterial', 'ngMessages'])
  .controller('MyController', MyController)
  .controller('ModalController', ModalController);

function MyController($scope, $mdDialog) {
  $scope.showAlert = function(ev) {
    $mdDialog.show({
      clickOutsideToClose: true,

      template: '<md-dialog>' +
        '  <md-dialog-content>' +
        '     Hi There {{message}}' +
        '  </md-dialog-content>' +
        '</md-dialog>',

      controller: 'ModalController'
    });
  };
}

function ModalController($scope) {
  $scope.message = 'You are an amazing person!';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>


<div ng-app="myApp" ng-controller="MyController">

  <md-button class="md-primary md-raised" ng-click="showAlert($event)">
    Alert Dialog
  </md-button>

</div>

注意：关于Angular was loaded more than once可能是由于多种原因。显然，无论是什么，它都与对话框中的SettingsCtrl重用无关modal。尝试查明该错误，大多数情况下它与错误的文件名或错误的 URL 或错位/错误的标签有关。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。