1
如何让ng-click事件真正触发？我已经尝试了所有这些工作。我知道警报最初工作正常，但在列表显示后，神奇的是所有按钮都无法正常工作。ng-click不会触发ng-table中的或不在
以下是页面显示（提前/提醒）。我已经验证每个按钮的细节都获得了一个唯一的ID。正如你所看到的，我也尝试了$ parent（因为一些按钮在ng-repeat内）以及$ rootscope试图让事情执行（即细节按钮）。这几乎是那样的话，之后的最初显示，因为没有功能的页面已经失去了参考angularjs文件：
这里的AngularJS文件：
var app = angular.module("EmployeeApplication", [])
.controller("EmployeeController",
function ($scope, $http,$window) {
AngularInit();
function AngularInit() {
//This will be called once per form load, via the ng-load function on the div
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = 'Unknown';
$scope.gotdata = false;
DisplayList();
ShowAlert('test')
}
function GetAllEmployees($http) {
//$scope.Message = 'NULL';
//$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = 'OK';
$scope.gotdata = true;
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.employees = {};
$scope.gotdata = false;
}
);
//window.setTimeout(function() {
// $scope.gotdata = true;
//}, 1000);
};
function DisplayList() {
//call the web service to get the list of people
//set the display action so that the list will be displayed
GetAllEmployees($http)
$scope.DisplayAction = 'List';
};
function CreateNewEmployee() {
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = 'Create';
$scope.$apply();
};
function ShowDetails(id) {
//call the web service to get the details of the person
ShowAlert('test')
$scope.gotdata = false;
$http.get('http://localhost:65315/api/employee/' + id).then(function (response) {
$scope.employees = response.data;
$scope.DisplayAction = 'Details';
$scope.Message = 'OK';
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.employees = {};
}
);
//Set the $scope.CurrentEmployee
$scope.$apply();
};
function ShowAlert(msg)
{
$window.alert(msg);
}
function CreateEmployee() {
//perform the actual creation based on $scope.CurrentEmployee
//if successful
DisplayList();
};
function DeleteEmployee(id) {
$scope.DisplayAction = 'Delete';
$scope.$apply();
};
function DoDeleteEmployee(id) {
//Perform actual deletion
//if successful
DisplayList();
};
function EditEmployee(id) {
//get the employee based on ID
$scope.DisplayAction = 'Edit';
$scope.$apply();
};
function EditUpdate() {
//perform the actual update based on $scope.id
//if successful
DisplayList();
};
}
);
//angular.module('EmployeeApplication', [])
// .controller('EmployeeController', ['$scope', '$window', function ($scope, $window) {
// $scope.greeting = 'Hello, World!';
// $scope.doGreeting = function (greeting) {
// $window.alert(greeting);
// };
// }]);
var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http)
{
$scope.MadeItHereMessage = 'We made it to the controller (first controller)';
$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = "OK";
},
function (err)
{
$scope.Message = "Call failed" + err.status + " " + err.statusText;
}
);
});
//var app = angular.module("MyModule", []).controller("MyController", function initController($scope)
//{
// $scope.MadeItHereMessage = 'This is a loadtest';
//});
//var app = angular.module("EmployeeApplication", ['$rootscope','$scope','$http'])
//.controller("EmployeeController",
// function AppCtrl($rootscope,$scope, $http)
// {
// $scope.DisplayAction = "List";
// }
//);
//var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http) {
// $http.get('EmployeeWebService.asmx/GetAllEmployees').then(function (response) {
// $scope.employees = response.data;
// }
// );
//});
这里是HTML文件：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/EmployeeAngular.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="EmployeeApplication">
<div ng-controller="EmployeeController" ng-init="AngularInit()">
{{Message}}
<br/>
{{DisplayAction}}
<button id="btnCreateNew1" ng-click="$parent.ShowAlert('Parent scope button pressed')">Show message from parent scope</button>
<br />
<!--The following is for listing the entire list of employees-->
<div id="listSection" ng-show="DisplayAction=='List'">
<!--The employees data is: {{employees}}-->
<!--<div id="listSection">-->
<table>
<thead>List of defined Employees</thead>
<tr>
<!--<td><button id="btnCreateNew" ng-click="CreateNewEmployee()">Create Employee</button></td>-->
<td><button id="btnCreateNew" ng-click="$rootscope.ShowAlert('Create button pressed')">Create Employee</button></td>
</tr>
<tr>
<td ng-show="gotdata">
<table id="EmployeeList">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-if="employees && employees!={undefined}">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td><button id="btnDetailsA{{employee.id}}" ng-click="$parent.ShowDetails({{employee.id}})">Details</button></td>
<td><button id="btnDetailsB{{employee.id}}" ng-click="$parent.ShowDetails({{employee.id}})">Details B</button></td>
<td><button id="btnDetailsC{{employee.id}}" ng-click="ShowDetails({{employee.id}})">Details C</button></td>
<td><button id="btnDetailsD{{employee.id}}" ng-click="$scope.ShowDetails({{employee.id}})">Details D</button></td>
<td><button id="btnDetailsE{{employee.id}}" ng-click="$rootscope.ShowDetails({{employee.id}})">Details E</button></td>
<td><button id="btnDelete{{employee.id}}" ng-click="$parent.DeleteEmployee({{employee.id}})">Delete</button></td>
<td><button id="btnEdit{{employee.id}}" ng-click="$parent.EditEmployee({{employee.id}})">Edit</button></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--The following is for listing the details of a single employee-->
<div id="DetailsSection" ng-show="DisplayAction=='Details'">
<table>
<tr>
<td>ID:</td>
<td> <input id="DetailsID" value={{employee.id}} /></td>
</tr>
<tr>
<td>Name:</td>
<td><input id="DetailsName" value={{employee.name}} /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="DetailsGender" value={{employee.gender}} /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="DetailsSalary" value={{employee.salary}} /> </td>
</tr>
<tr>
<td>
<button id="NavTolist" ng-click="DisplayList()">Back to List</button>
</td>
<td>
<button id="NavToDelete" ng-click="DeleteEmployee({{id}})">Delete</button>
</td>
<td>
<button id="NavToEdit" ng-click="EditEmployee({{id}})">Edit</button>
</td>
</tr>
</table>
</div>
<!--The following is for editing a employee-->
<!--<div id="EditSection" ng-show="DisplayAction=='Edit'">
<table>
<tr>
<td>ID:</td>
<td>
<input id="ID" value={{id}} />
</td>
</tr>
<tr>
<td>Name:</td>
<td><input id="" value={{name}} ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value={{gender}} ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value={{salary}} ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="EditUpdate" type="button" value="Update" ng-click="EditUpdate()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
<td>
<button id="NavToDeleteEdit" type="button" value="Delete" ng-click="DeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for verification of deletion-->
<div id="DeletionSection" ng-show="DisplayAction=='Delete'">
<table>
<tr>
<td>Do you really want to delete {{name}}</td>
<td></td>
<td>
<button id="btnCancelDelete" type="button" value="No" ng-click="DisplayList()"></button>
</td>
<td>
<button id="btnDeleteEmployee" type="button" value="Yes" ng-click="DoDeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>
<!--The following is for creation of a employee-->
<!--<div id="CreationSection" ng-show="DisplayAction=='Create'">
<table>
<tr>
<td>Name:</td>
<td><input id="" value="" ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value="" ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value="" ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="btnCreateEmployee" type="button" value="Delete" ng-click="CreateEmployee()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
</tr>
</table>
</div>-->
</div>
</body>
</html>
你为什么要保持javascript的功能？你应该把控制器当作（'this.'）或范围函数（'$ scope.'）。此外，你可以做一个小提琴或plnkr玩耍？ – tanmay