Question

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

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

Answer 2

以这种方式尝试：

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

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

2 个答案: