javascript - 在 Angular Material 中为 mdDialog Controller 设置数组类型语法

Question

我正在尝试使用 Angular Material 框架在网络上使用 Material Design。我正在使用 $mdDialog 服务，它需要一个 Controller 属性来创建自定义对话框。 Angular Material 不遵循 Controller 定义的数组类型语法，这会在缩小时中断。我这里有以下代码:

HTML

<div ng-controller="AppCtrl as appCtrl" class="md-padding" id="popupContainer">
  <p class="inset">
    Open a dialog over the app's content. Press escape or click outside
    to close the dialog and send focus back to the triggering button.
  </p>
  <div class="dialog-demo-content" layout="row" layout-wrap >
    <md-button class="md-primary md-raised" ng-click="appCtrl.showAdvanced($event)" flex flex-md="100">
      Custom Dialog
    </md-button>
  </div>
</div>

JS

angular.module('dialogDemo1', ['ngMaterial'])
.controller('AppCtrl', ['$mdDialog', function($mdDialog) {
  var self = this;
  self.showAdvanced = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true
    })
    .then(function(answer) {
      // Do something on success
    }, function() {
      // Do something on failure
    });
  };
}]);
function DialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

有人尝试过并可以帮助我吗？

Answer 1

每个 Angular Controller 都遵循数组类型语法。您只需将 Controller 更改为...

angular.module('dialogDemo1', ['ngMaterial'])
.controller('AppCtrl', ['$mdDialog', function($mdDialog) {
  var self = this;
  self.showAdvanced = function(ev) {
    $mdDialog.show({
      controller: 'DialogController',
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true
    })
    .then(function(answer) {
      // Do something on success
    }, function() {
      // Do something on failure
    });
  };
}]).controller('DialogController', ['$scope', '$mdDialog', function($scope, $mdDialog) {
      $scope.hide = function() {
        $mdDialog.hide();
      };
      $scope.cancel = function() {
        $mdDialog.cancel();
      };
      $scope.answer = function(answer) {
        $mdDialog.hide(answer);
      };
    }]);