This makes no sense. I have one ng-click working and the rest don't work. I wish I could tell you more, but that is literally it. Please help me someone, I don't know how this could possibly be happening.
这毫无意义。我有一个ng-click工作,其余的都不起作用。我希望我能告诉你更多,但这就是字面意思。请帮助我一个人,我不知道这可能会发生什么。
js Script
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
//function refresh(){
//$http.get("/Background/KralovecRecords.json").success(function (response) {
// alert("Affirmative, Andrew. I read you.");
// $scope.names = response;
//}).error(function (error) {
// alert("Get Error: "+error);
//});
//}
function refresh() {
$http.get("/Database/KralovecSelect").success(function (response) {
alert("Affirmative, Andrew. I read you.");
$scope.names = response;
}).error(function (error) {
alert("Get Error: " + error);
});
}
refresh();
// Version
function getVersion() {
$http.get("/Database/KralovecVersion").success(function (response) {
alert("" + response);
}).error(function (error) {
alert("Get Error: " + error);
});
}
// Works
$scope.editItem = function (id) {
alert("Course"+id);
$http.post('/Database/KralovecMessage',id).success(function (response) {
console.log("Response"+respsone);
$scope.contact = response;
refresh();
});
}
// Will not work
$scope.dropItem = function (id) {
alert("Course" + id);
}
// Will not work
$scope.addCourse = function (){
alert("Course");
}
});
HTML Page
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="~/Scripts/Global.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table class="table table-bordered table-striped ajk-table">
<thead>
<tr>
<th><input type="checkbox" id="checkall" /></th>
<th>Course</th>
<th>Section</th>
<th>Max</th>
<th>CRN</th>
<th>Instructor</th>
<th>Days</th>
<th>Time</th>
<th>Room</th>
<th>Notes</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tr>
<td> </td>
<td><input class="form-control has-error" ng-model="contact.Course"></td>
<td><input class="form-control has-error" ng-model="contact.Section"></td>
<td><input class="form-control has-error" ng-model="contact.Max"></td>
<td><input class="form-control has-error" ng-model="contact.CRN"></td>
<td><input class="form-control has-error" ng-model="contact.Instructor"></td>
<td><input class="form-control has-error" ng-model="contact.Days"></td>
<td><input class="form-control has-error" ng-model="contact.Time"></td>
<td><input class="form-control has-error" ng-model="contact.Room"></td>
<td><input class="form-control has-error" ng-model="contact.Notes"></td>
<td><button class="btn btn-primary" ng-click="alert(5);">Add Contact</button></td>
<td>
<button class="btn btn-primary" ng-click="alert('Please wokr');">Update</button>
<button class="btn btn-warning" ng-click="alert('Why god?');">Clear</button>
</td>
</tr>
<tr ng-repeat="contact in names">
<td><input type="checkbox" class="checkthis" /></td>
<td>{{contact.Course}}</td>
<td>{{contact.Section}}</td>
<td>{{contact.Max}}</td>
<td>{{contact.CRN}}</td>
<td>{{contact.Instructor}}</td>
<td>{{contact.Days}}</td>
<td>{{contact.Time}}</td>
<td>{{contact.Room}}</td>
<td>{{contact.Notes}}</td>
<td><p data-placement="top" data-toggle="tooltip" title="Drop"><button class="btn btn-danger btn-xs" data-title="Drop" data-toggle="modal" data-target="#drop" ng-click="dropItem(contact.Course)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ng-click="editItem(contact.Course)"><span class="glyphicon glyphicon-pencil"></span></button></p></td>
</tr>
<tr>
<th>New Database</th>
<th>
<p data-placement="top" data-toggle="tooltip" title="Add New Database"><button class="btn btn-primary btn-xs" data-title="add_database" data-toggle="modal" data-target="#view" ng-click="addDB(')"><span class="glyphicon glyphicon-plus"></span></button></p>
<p data-placement="top" data-toggle="tooltip" title="Update Database"><button class="btn btn-primary btn-xs" data-title="update_database" data-toggle="modal" data-target="#view" ng-click="updateDB(DB_INPUT)"><span class="glyphicon glyphicon-open"></span></button></p>
<p data-placement="top" data-toggle="tooltip" title="Upload file to Database"><button class="btn btn-primary btn-xs" data-title="add_file_database" data-toggle="modal" data-target="#view" ng-click="fileAddDB(DB_INPUT)"><span class="glyphicon glyphicon-file"></span></button></p>
</th>
<th colspan="2"><input class="form-control has-error" ng-model="DB_INPUT"></th>
</tr>
</table>
</div>
</body>
4 个解决方案
#1
0
Try adding ng-controller="customersCtrl" to the table on top.
尝试将ng-controller =“customersCtrl”添加到顶部的表中。
Example:
<table class="table table-bordered table-striped ajk-table" ng-controller="customersCtrl">
I'm presuming you've already added ng-app to the body or parent element.
我假设你已经将ng-app添加到了body或parent元素中。
#2
0
I think this issue is the call to alert() inside of ng-click. Angular is looking on the $scope of your directive or controller or whatever scope that element belongs to ($rootScope by default). i.e. this will work:
我认为这个问题是在ng-click内调用alert()。 Angular正在查看指令或控制器的$ scope或该元素所属的任何范围(默认情况下为$ rootScope)。即这将工作:
<script>
app.controller('customersCtrl', function ($scope, $http) {
$scope.myAlert = function(){
alert('this alert works!')
};
});
</script>
<button ng-controller="customersCtrl" ng-click='myAlert()'>
#3
0
Looking at your html structure, I presume you are using bootstrap along with the modal dialog. I guess the modal is getting fired on click and as such your code isn't working because its not sure whether to show the modal or fire the ng-click event.
看看你的html结构,我假设你正在使用bootstrap和模态对话框。我想这个模式会因点击而被解雇,因此你的代码无法运行,因为它不确定是否显示模态或触发ng-click事件。
Just to be clear on this you can try:
为了清楚这一点,您可以尝试:
1.removing the data-attributes and see what happens
2. Swap the below 2 lines and see if editItem function works instead of dropItem function.
1.删除数据属性,看看会发生什么2.交换下面两行,看看editItem函数是否有效,而不是dropItem函数。
<td><p data-placement="top" data-toggle="tooltip" title="Drop"><button class="btn btn-danger btn-xs" data-title="Drop" data-toggle="modal" data-target="#drop" ng-click="dropItem(contact.Course)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ng-click="editItem(contact.Course)"><span class="glyphicon glyphicon-pencil"></span></button></p></td>
Bottom line is clean up your code and remove the unnecessary data-attributes for debugging purpose and see if console throws any errors.
底线是清理代码并删除不必要的数据属性以进行调试,并查看控制台是否抛出任何错误。
#4
0
Use ng-click if you want to use a function on your scope. Since you're just calling alert, which is a host function, you can use 'onclick' rather than 'ng-click'
如果要在作用域上使用函数,请使用ng-click。由于您只是调用警报,这是一个主机功能,您可以使用'onclick'而不是'ng-click'
#1
0
Try adding ng-controller="customersCtrl" to the table on top.
尝试将ng-controller =“customersCtrl”添加到顶部的表中。
Example:
<table class="table table-bordered table-striped ajk-table" ng-controller="customersCtrl">
I'm presuming you've already added ng-app to the body or parent element.
我假设你已经将ng-app添加到了body或parent元素中。
#2
0
I think this issue is the call to alert() inside of ng-click. Angular is looking on the $scope of your directive or controller or whatever scope that element belongs to ($rootScope by default). i.e. this will work:
我认为这个问题是在ng-click内调用alert()。 Angular正在查看指令或控制器的$ scope或该元素所属的任何范围(默认情况下为$ rootScope)。即这将工作:
<script>
app.controller('customersCtrl', function ($scope, $http) {
$scope.myAlert = function(){
alert('this alert works!')
};
});
</script>
<button ng-controller="customersCtrl" ng-click='myAlert()'>
#3
0
Looking at your html structure, I presume you are using bootstrap along with the modal dialog. I guess the modal is getting fired on click and as such your code isn't working because its not sure whether to show the modal or fire the ng-click event.
看看你的html结构,我假设你正在使用bootstrap和模态对话框。我想这个模式会因点击而被解雇,因此你的代码无法运行,因为它不确定是否显示模态或触发ng-click事件。
Just to be clear on this you can try:
为了清楚这一点,您可以尝试:
1.removing the data-attributes and see what happens
2. Swap the below 2 lines and see if editItem function works instead of dropItem function.
1.删除数据属性,看看会发生什么2.交换下面两行,看看editItem函数是否有效,而不是dropItem函数。
<td><p data-placement="top" data-toggle="tooltip" title="Drop"><button class="btn btn-danger btn-xs" data-title="Drop" data-toggle="modal" data-target="#drop" ng-click="dropItem(contact.Course)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ng-click="editItem(contact.Course)"><span class="glyphicon glyphicon-pencil"></span></button></p></td>
Bottom line is clean up your code and remove the unnecessary data-attributes for debugging purpose and see if console throws any errors.
底线是清理代码并删除不必要的数据属性以进行调试,并查看控制台是否抛出任何错误。
#4
0
Use ng-click if you want to use a function on your scope. Since you're just calling alert, which is a host function, you can use 'onclick' rather than 'ng-click'
如果要在作用域上使用函数,请使用ng-click。由于您只是调用警报,这是一个主机功能,您可以使用'onclick'而不是'ng-click'