如何在 ng-click 的自定义指令中打开 mdDialog？

Question

我正在尝试让 ng-click 在模板中打开自定义指令中的模式，同时将一些表单参数发送到指令控制器，然后调用服务。我把它放在 plunker 中，但显然无法通过 ng-click 访问该指令。

我想我可以只使用 $scope 而不是孤立的范围，但我不确定这样的结构是否正确。我必须尝试将所有这些都变成一个组件，所以这就是我使用自定义指令的原因。

我见过很多类似的东西，但不完全是我想做的。关于如何执行此操作的正确结构以及我在这里做错了什么有什么想法吗？

这是我目前的代码：

index.html

  <head>
    <link data-require="angular_material_design@0.6.1" 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="angular_material_design@0.6.1" data-semver="0.6.1" src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
    <script data-require="angular_material_design@0.6.1" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script data-require="angular_material_design@0.6.1" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script data-require="angular_material_design@0.6.1" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
    <script data-require="angular_material_design@0.6.1" 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'
        });
          }
        }
  });

Answer 1

您需要像这样在应用中包含 material 设计：

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

您需要像这样连接一个控制器：

<body ng-controller="MainCtrl">

打开模式不需要奇怪的指令行为，你可以从控制器打开，但是如果你真的想要指令，这里是一个工作指令（也包含在 plunker 中）

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

如何在 ng-click 的自定义指令中打开 mdDialog？

How to open mdDialog in a custom directive from ng-click?

angularjs

mddialog