Question

我正在尝试在模板中进行ng-click以在自定义指令中打开模式，同时将一些表单参数发送到diretives控制器然后调用服务。我在一个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

您需要在应用中包含材料设计，如下所示：

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？

1 个答案: