如何從ng-click的自定義指令中打開mdDialog？

我試圖讓ng在模板中單擊以在向定向控制器發送某些表單參數的同時打開定製指令中的模式，然後調用服務。我有一個plunker，但我無法從ng-click顯然得到指令。如何從ng-click的自定義指令中打開mdDialog？

我想我可以只使用$範圍而不是隔離範圍，但我不確定這樣的東西的正確結構。我必須嘗試使所有這些都成爲組件，所以這就是我使用自定義指令的原因。

我見過很多有點類似的東西，但並不完全是我想要做的。關於如何做到這一點的正確結構以及我在這裏做錯了什麼的想法？

這裏是我的代碼至今：

的index.html

<head> 
    <link data-require="[email protected]" data-semver="0.6.1" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css" /> 
    <script data-require="[email protected]" data-semver="0.6.1" src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <my-directive></my-directive> 
    <div align="center"> 
     <md-button class="md-raised" ng-click="openLogin()">Login</md-button> 
    </div> 
    </body> 

</html>

myDialog

<md-dialog> 
    <md-toolbar class="md-primary"> 
     <div class="md-toolbar-tools" layout="row" layout-align="space-between center"> 
      <h2 class="md-flex">Login</h2> 

      <md-button class="md-icon-button md-accent md-hue-2" aria-label="Close" ng-click="closeDialog()"> 
       <md-icon md-primary md-svg-icon="assets/images/ic_close_24px.svg"></md-icon> 
      </md-button> 

     </div> 
    </md-toolbar> 

    <md-content class="sticky-container"> 
     <div class="dialog-content"> 
       <div class="form-group"> 
        <label for="username">Username:</label> 
       <input type="text" id="username" ng-model="login.username"> 

      <label for="password">Password:</label> 
       <input type="password" id="password" ng-model="login.password"> 
      <br><br> 

      <div> 
        <md-button id="btnCancel" class="input-lg md-raised md-accent" type="cancel" flex>Cancel</md-button> 
        <md-button id="btnSubmit" class="input-lg md-raised md-accent" type="submit" ng-submit="submit(login)" flex>Login</md-button> 
       </div> 

     </div> 
    </md-content> 
</md-dialog>

的script.js

// Code goes here 
var app = angular.module('app', []); 

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     controller: loginController, 
     template: '<div></div>' 
    }; 

    loginController.$inject = ['$scope', '$mdDialog']; 

     function loginController($scope, $mdDialog) { 

     $scope.openDialog = function(){ 
      $mdDialog.show({ 
      controller: function($scope, $mdDialog){ 
       // do something with dialog scope 
       console.log("username is: " + $scope.username); 
       console.log("password is: " + $scope.password); 
       //TODO Call service function to authenticate. 
      }, 
      templateUrl: 'myDialog.html' 
     }); 
      } 
     } 
    });

來源

2017-07-14 James Drinkard

您需要包括材料設計的應用程序，像這樣：

var app = angular.module('plunker', ['ngMaterial']);

您需要連接像這樣一個控制器：

要打開模式無需奇怪的指令行爲你可以從控制器打開，但是如果你真的想要這裏的指令是一個工作的（也包含在蹲點中）

app.directive('myDirective', ['$rootScope', '$mdDialog', function($rootScope, $mdDialog){ 
    return{ 
    restrict: 'E', 
    scope: {}, 
    template: '<md-button ng-click="openLogin()" class="md-raised md-primary">Login(Directive)</md-button>', 
    link: function (scope, element, attrs, model) { 
     scope.openLogin = function(){ 
     var modalScope = $rootScope.$new(); 
     $mdDialog.show({ 
      scope: modalScope, 
      templateUrl: 'myDialog.html', 
      clickOutsideToClose: true, 
      parent: angular.element(document.body), 
     }).then(function (result) { 
      //result contains username and password 
     }, function(){ 
      //modal exited/cancelled 
     }); 
     } 
    } 
    }; 
}]);

http://plnkr.co/edit/hfxyWHidbB19PU5p3k9Z?p=preview

來源

2017-07-14 16:46:21

其實我正在做的比我的摔跤手更復雜，但這有助於！我也錯過了明顯的材料設計庫！謝謝蒂姆！ –

如何從ng-click的自定義指令中打開mdDialog？

回答

相關問題