角度材料从模板指令关闭mdDialog

时间:2016-09-06 13:51:31

标签: angularjs angularjs-directive angular-material

我想通过这种方式关闭对话:

showAlert(ev) {
    this.mdDialog.show({
      restrict: 'E',
      template:'<loader></loader>' +
      '    <md-button ng-click="this.mdDialog.hide()" class="md-primary">' +
    '      Close Dialog' +
    '    </md-button>' ,
      parent: angular.element(document.body.childNodes[5]),
      clickOutsideToClose:true
  });
};
closeDialog() {
  this.mdDialog.hide();
};

但按钮出现并且什么都不做。 任何的想法 ?

2 个答案:

答案 0 :(得分:2)

我找到了答案 http://webiks.com/mddialog-with-a-confirmation-dialog/

在页面https://embed.plnkr.co/HiLJlsp0yfcukxi2McNZ/中的最后一个plunker中。

不需要范围属性。

P.S

现在我看到版本后的@camden_kid回答,对我来说也是正确的,谢谢。

答案 1 :(得分:1)

你去了 - CodePen

标记

<div ng-controller="MyController as vm" class="md-padding" ng-cloak="" ng-app="app">
   <md-button class="md-primary md-raised" ng-click="vm.show($event)">Open</md-button>
  </script>
</div>

JS

angular.module('app',['ngMaterial'])

.controller('MyController', function($scope, $mdDialog) {
  this.show = function(ev) {
    $mdDialog.show({
      restrict: 'E',
      template:'<loader></loader>' +
      '    <md-button ng-click="vm.hide()" class="md-primary">' +
    '      Close Dialog' +
    '    </md-button>' ,
      parent: angular.element(document.body),
      clickOutsideToClose:true,
      targetEvent: ev,
      controller: DialogController,
      controllerAs: "vm"
    });
  };
});

function DialogController($scope, $mdDialog) {
  this.hide = function() {
    $mdDialog.hide();
  };
}