ng-click 未在 md-bottom-sheet 中触发答案

【问题标题】：ng-click not firing in md-bottom-sheetng-click 未在 md-bottom-sheet 中触发
【发布时间】：2023-03-08 15:11:01
【问题描述】：

对于一个冗长的帖子，我提前道歉。我想包含尽可能多的数据，看看您是否可以帮助我解决我的问题。

我最初使用 Bootstrap 作为原型和概念证明来开发该项目。现在我正计划投入生产，我想使用 angular-material。

在 Bootstrap 中一切正常。但是，现在我使用的是材料设计，现在我使用的是 md-bottom-sheet，所以 ng-click 不起作用。这是完整的代码sn-ps；

HTML

index.html

<html ng-app="teamApp">
<head>
    <link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body layout-fill layout-margin layout-padding layout="column" ng-controller="TeamController as teamCtrl">

    <md-toolbar layout="row">
        <div class="md-toolbar-tools">
            <md-button class="md-icon-button" hide-gt-sm ng-click="toggleSidenav('left')">
                <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
            </md-button>
            <h2>Team Builder</h2>
        </div>
    </md-toolbar>
    <div flex layout="row">
        <md-sidenav class="md-sidenav-left md-whiteframe-z2" layout="column" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <md-toolbar layout="row">
                ....
            </md-toolbar>
            <md-list>
                ....
            </md-list>
        </md-sidenav>
    <div flex id="content" layout="column">
        <md-content class="md-padding" flex layout="column">
            <!-- Custom Directive to team-form.html -->
            <team-forms></team-forms>
        </md-content>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
    <script src="js/team.js"></script>
</body>
</html>

您将看到 team-forms 指令。这是一个引入 team-form.html 的自定义指令。 team-form.html 具有单击时弹出 md-bottom-sheet 的按钮。

team-form.html

<div class="teamForms" layout="column">
    <div id="team-list" class="row" flex>
        <md-list>
            <md-subheader class="md-no-sticky">Teams</md-subheader>
            <md-list-item ng-repeat="team in teams">
                    ........
            </md-list-item>
        </md-list>
    </div>

    <!-- button that when click, makes md-bottom-sheet pop up -->
    <md-button class="md-fab" style="position:absolute; right:0; bottom:0" aria-label="Add Team" ng-click="teamCtrl.showAddTeam($event)">
        <span style="font-size:3em; line-height:1.2em">+</span>
    </md-button>
</div>

用于 md-bottom-sheet 的 HTML 模板是 team-add.html。这是单击上面的按钮时弹出的内容。

团队添加.html

<!-- FORM TO CREATE team -->
<md-bottom-sheet>
{{formData}}
<md-toolbar layout="row">
    <div class="md-toolbar-tools">
       <h2>Add Team</h2>
    </div>
</md-toolbar>
<form name="add-team">
    <md-content layout-padding layout-sm="column" layout="row">
        <md-input-container>
            <label>Team Name</label>
            <input name="teamName" ng-model="formData.name" required type="text">
        </md-input-container>
     </md-content>
     <div layout="row" ng-show="formData.name.length >= 1">
         <md-input-container>
             <label>Employee Name</label>
             <input class="form-control" name="teamEmployee" ng-model="employee.name" type="text">
         </md-input-container>
         <md-button class="md-raised md-primary" ng-click="addEmployee(formData)" type="submit">Add</md-button>
      </div>
      <md-content layout="row">
          <md-input-container>
              <md-button class="md-raised md-primary" ng-click="teamCtrl.createTeam()">Add Team</md-button>
          </md-input-container>
      </md-content>
</form>

</md-bottom-sheet>

JS

team.js

(function() {
'use strict';

var app = angular.module("teamApp", ["ngMaterial"]);

app.controller("TeamController", ["$scope", "$http", "$mdSidenav", "$mdBottomSheet", function($scope, $http, $mdSidenav, $mdBottomSheet) {
    $scope.formData = {};
    $scope.formData.employees = [];

    // when landing on the page, get all teams and show them
    $http.get("/api/teams")
        .success(function(data) {
        $scope.teams = data;
    })
        .error(function(data) {
        console.log('Error: ' + data);
    });

    $scope.toggleSidenav = function(menuId) {
        $mdSidenav(menuId).toggle();
    };

    this.showAddTeam = function($event) {
        $mdBottomSheet.show({
            templateUrl: 'directives/team/team-add.html',
            targetEvent: $event
        })
    };

    this.resetForms = function() {
        $scope.teamForm = false;
        $scope.employeeForm = false;
    };

    this.getTeam = function(id) {
        $http.get("/api/teams/" + id)
            .success(function(data) {
                $scope.singleTeam = data;
                console.log('Success: ' + data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
        };

    // when submitting the add form, send the text to the node API
    this.createTeam = function() {
        $http.post("/api/teams", $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // clear the form so our user is ready to enter another
                $scope.formData.employees = [];
                $scope.teams = data;
                console.log(data);
            })
           .error(function(data) {
               console.log('Error: ' + data);
           });
        };

    this.updateTeam = function(id) {
        $http.put("/api/teams/" + id, $scope.singleTeam[0])
            .success(function(data) {
                $scope.singleTeam = {};
                $scope.teams = data;
                console.log('Success: ' + data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
        };

  // delete a todo after checking it
  this.deleteTeam = function(id) {
    $http.delete("/api/teams/" + id)
      .success(function(data) {
        $scope.teams = data;
        console.log(data);
      })
      .error(function(data) {
        console.log('Error: ' + data);
      });
  };


  this.getRotation = function() {
    $http.post("/api/rotations")
      .success(function(data) {
        console.log(data);
      })
      .error(function(data) {
        console.log('Error: ' + data);
      });
  };

}]);

app.directive("teamForms", function() {
  return {
    restrict: "E",
    templateUrl: "directives/team/team-forms.html",
    controller: ["$scope", function($scope) {
      $scope.employee = {};
      $scope.teamForm = false;
      $scope.employeeForm = false;

      this.showTeamForm = function(value) {
        return $scope.teamForm == value;
      };

      this.setTeamForm = function(value) {
        $scope.teamForm = value;
      };

      this.showEmployeeForm = function(value) {
        return $scope.employeeForm == value;
      };

      this.setEmployeeForm = function(value) {
        $scope.employeeForm = value;
      };

      $scope.addEmployee = function(dataSet) {
        dataSet.employees.push($scope.employee);
        $scope.employee = {};
      };

      $scope.removeEmployee = function(dataSet, index) {
        dataSet.employees.splice(index, 1);
      };
    }],
    controllerAs: "teamFormCtrl"
  };
});

app.directive("teamEditForm", function() {
  return {
    restrict: "E",
    templateUrl: "directives/team/team-edit.html"
  };
});
}());

问题出在 team-add.html 中。它是试图调用 createTeam() 的 md 按钮。

预期的结果是将团队的名称发布到我的 API 端点和我的 mongoDB 设置中。这之前在引导程序中运行良好，但我觉得现在我在 UI 中更深入了解 md-bottom-sheet 需要如何设置，我有一些范围或控制器问题。

我什至尝试向 ng-click 添加一个虚假的、不存在的函数，以查看单击时是否引发了一些错误，但没有出现错误。节点甚至没有报告正在发送的发布命令。看起来按钮完全没有做任何事情

任何帮助将不胜感激，如果需要更多代码，请告诉我，我会发布！

谢谢！

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

在你的md-button 你的ng-click 是这样的

<md-button class="md-fab"
    ng-click="teamCtrl.showAddTeam($event)">

您的问题显示为“ng-click 未触发”，要使 ng-click 正常工作，请尝试一下

ng-click="showAddTeam($event)">

这将起作用，因为您正在尝试调用某个控制器中的函数，并且您的指令的 html 仅在控制器的范围内。

【讨论】：

嗨亚瑟，感谢您的快速回复。这部分代码工作正常。问题出在 team-add.html 中，即调用 createTeam() 的 ng-click。我已经修改了我的问题，以使这一点更清楚。 :-)