我提前为一篇冗长的帖子道歉。我希望尽可能多地包含数据，看看你是否可以帮我解决问题。
我最初使用Bootstrap作为原型和概念证明开发了该项目。现在我正计划投入生产，我想使用角度材料。
一切都在Bootstrap中完美运行。但是，现在我使用材料设计，因为我现在使用md-bottom-sheet，所以ng-click不起作用。这是完整的代码片段;
<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。
<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。这是单击上面按钮时弹出的内容。
<!-- 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>
(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中添加一个假的，不存在的函数，以查看单击时是否抛出了一些错误但没有出现错误。节点甚至没有报告正在发送的post命令。看起来按钮似乎什么都没做
非常感谢任何帮助，如果需要更多代码，请告诉我，我会发布！
谢谢！
答案 0 :(得分：0)
在md-button ng-click <md-button class="md-fab"
ng-click="teamCtrl.showAddTeam($event)">
就是这样的
ng-click="showAddTeam($event)">
你的问题是“ng-click not firing”，让点击工作尝试一下
<input type'file' multiple>这是有效的，因为你试图调用某个控制器中的函数而你的指令的html只在控制器范围内。