AngularJS ng点击未启动
AngularJS ng-click is not firing
我的应用程序中有一个ng点击,当点击元素时它不会启动。
HTML:
<div class="col-md-7" ng-controller="githubController">
<div class="panel commitPanel">
<table class="table">
<thead>
<th>sha</th>
<th>Author</th>
<th>Message</th>
<th>Date</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
app.js:
.controller("githubController",["$scope", function($scope){
$.ajax({
type: "GET",
url: "https://api.github.com/users/jmona789/repos?sort=pushed",
success: function(repos) {
for(var i = 0; i < repos.length; i++) {
var newListItem = buildListGroup(repos[i]);
$(".list-group").append(newListItem);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Something went wrong. We are looking into it!");
}
});
function buildListGroup(repoData) {
var commitsApiUrl = "https://api.github.com/repos/";
commitsApiUrl += repoData.owner.login + "/";
commitsApiUrl += repoData.name + "/commits";
var newLink = $("<a>")
.attr("url", commitsApiUrl)
.attr("ng-click", 'buildCommits()')
.addClass("list-group-item")
.append(repoData.full_name);
return newLink;
}
所有这些都很好,它为每个元素添加了ng点击^
但当我点击每个元素时,控制器中的这个功能永远不会启动:
$scope.buildCommits = function(){
$.ajax({
type: "GET",
url: $(this).attr("url"),
success: function(commits) {
$("tbody").empty();
for(var i = 0; i < commits.length; i++) {
$("tbody").append(buildTableRow(commits[i]));
}
}
})
function buildTableRow(commitData) {
var commitUrl = commitData.html_url;
var shaTd = $("<td>").append($("<a href="+commitUrl+">").html(commitData.sha).attr("target", "_blank"));
var authorTd = $("<td>").append(commitData.author.login);
var messageTd = $("<td>").append(commitData.commit.message);
var dateTd = $("<td>").append(commitData.commit.author.date);
return $("<tr>").append(shaTd)
.append(authorTd)
.append(messageTd)
.append(dateTd);
}
}
}])
ng点击不起作用,因为您没有编译返回到DOM的HTML。但是,您的代码中存在许多问题,这些问题将使它无法工作。
- $(".list group").append(newListItem);'列表组的类不在您的视图中
- 更重要的是,这并不是做Angular的正确方式。很少需要直接的DOM操作,而且通常也不错
- 就像@alord说的那样,链接有一个url和一个ng点击。他们做一个或另一个,而不是两者都做
角度方式
在HTML视图中使用ng repeat,并在控制器中创建的模型上进行迭代。
示例视图
<div ng-repeat="link in links">
<a ng-click="buildCommits()" class="list-group-item">
{{link.full_name}}
</a>
</div>
控制器JS
success: function(repos) {
$scope.links = buildLinks(repos);
},
function buildLinks(repos) {
var links = [];
_.forEach(repos, function(repo) {
var commitsApiUrl = "https://api.github.com/repos/";
commitsApiUrl += repoData.owner.login + "/";
commitsApiUrl += repoData.name + "/commits";
links.push({
commitsApiUrl: commitsApiUrl
full_name: repo.full_name
});
});
return links;
}
此处的代码
var newLink = $("<a>")
.attr("url", commitsApiUrl)
.attr("ng-click", 'buildCommits()')
.addClass("list-group-item")
.append(repoData.full_name);
return newLink;
锚标记的"url"属性究竟是什么?试试这个代替它
var newLink = $("<a>")
.attr("href", commitsApiUrl)
.attr("ng-click", 'buildCommits()')
.addClass("list-group-item")
.append(repoData.full_name);
return newLink;
我很困惑,当你应用了href属性时,为什么你想让ng-click触发?您可以考虑使用具有数据属性的其他标记。
在添加ng控制器之前,首先需要确保在html中定义了ng应用程序。我在你的代码片段中看不到它。如果它已经存在,那就不是问题了。
此外,在定义链接元素的代码段中,尝试将href设置为"#",并在执行所需逻辑后在单击函数中进行导航,以确保它将被激发。
此外,请尝试将DOM操作从控制器移动到指令,因为这是执行此操作的最佳位置,并保留控制器仅用于执行业务逻辑。
您需要使用$compile服务编译字符串。用您的控制器注入"$compile"服务
类似:
function buildListGroup(repoData) {
var commitsApiUrl = "https://api.github.com/repos/";
commitsApiUrl += repoData.owner.login + "/";
commitsApiUrl += repoData.name + "/commits";
var newLink = $("<a>")
.attr("url", commitsApiUrl)
.attr("ng-click", 'buildCommits()')
.addClass("list-group-item")
.append(repoData.full_name);
return $compile(template)($scope);
}
首次读取http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx
相关文章:
- ng映射方向备选方案
- AngularJS UI路由器不能像ng路由器那样工作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 角度:在ng重复上切换图像
- 正在使用$location.path(.)路由ng视图
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- AngularJS:ng之后,重复$scope值未按预期更新
- 从控制器返回后Ajax启动事件激发
- 如何在所有ng点击事件AngularJS上启动一个方法
- 是否可以在第n个元素处重复启动ng
- AngularJS ng点击未启动
- $watch不会启动自动完成ng模型
- ng-app并不总是启动
- 如何在 ng-repeat中启动每个函数
- AngularJs:如何在值变化时启动动画(ng-scope)
- Mobilefirst Ionic ng启动应用程序点击两次
- 我的ng-change没有在我的Angular/Rails应用上启动
- 为什么ng-submit没有启动$scope.submit函数
- AngularJS-ng更改未启动
- angular ng click事件未启动