在 Angular Material 中为 mdDialog 控制器设置数组类型语法

Question

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

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.module('dialogDemo1', ['ngMaterial'])
  .controller('AppCtrl', ['$mdDialog',
    function($mdDialog) {
      var self = this;
      var DialogController = ['$scope', '$mdDialog',
        function($scope, $mdDialog) {
          $scope.hide = function() {
            $mdDialog.hide();
          };
          $scope.cancel = function() {
            $mdDialog.cancel();
          };
          $scope.answer = function(answer) {
            $mdDialog.hide(answer);
          };
        }
      ];
      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
          });
      };
    }
  ]);

Answer 2

每个angular控制器都遵循数组类型语法。您只需将控制器更改为...

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

在 Angular Material 中为 mdDialog 控制器设置数组类型语法

Setting array-type syntax for mdDialog controller in Angular Material

javascript

angularjs

angular-material