1

我试图在模板中获取 ng-click 以在自定义指令中打开模式，同时将一些表单参数发送到 diretives 控制器，然后调用服务。我把它放在一个plunker中，但我显然无法从 ng-click 获得指令。

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

我见过很多类似的事情，但不完全是我想要做的。关于如何做到这一点的正确结构以及我在这里做错了什么的任何想法？

这是我到目前为止的代码：

索引.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>

我的对话

<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>

脚本.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'
        });
          }
        }
  });
4

1 回答 1

3

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

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

于 2017-07-14T16:46:21.873 回答