2016-09-06 11 views
5

私はこのようにしてダイアログを閉じますトリングだ:角度材料近いmdDialog

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

をしかしボタンが表示され、何もしません。

+0

this.mdDialogの代わりに$ mdDialogを使用しない理由は何ですか?自分の指示に$ mdDialogを問題なく挿入することができます... – troig

+0

ありがとうございます。それは問題ではありません.. –

+0

あなたのコードをプランナーに置く可能性はありますか? – troig

答えて

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(); 
    }; 
} 
+0

この解決策には「これ」という回答がありますか?私はかつてJohn Papaのガイドラインを読んで、 '$ scope'を使わないようにしました。 –

+0

私にはうまくいきませんでした。 $ scopeをコンストラクタに持ってきて、this.myscope = $ scopeに保存しようとしましたが、Wanrning以外のエラーは表示されません。 は、スクロールされた静的に配置された親コンテナでは正しく動作しません。 –