[AngularJS]AngularJS ng-click 不开火

发布时间: 2017/4/16 11:16:50
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有 ng-click 我不发射时的应用程序中单击中的元素。

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-click 的每个元素 ^

但当我单击每个元素在控制器中的此函数永远不会触发︰

    $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);
      }
    }
  }])

解决方法 1:

ng-click不工作,因为您不编译返回到 DOM 的 HTML 然而有一些问题与您的代码将会阻止它的工作。

  • $ (".list-group").append(newListItem);'目录组' 类不在您的视图。
  • 更重要的是,这不是做角的正确方式。 直接的 DOM 操作是很少需要和经常不坏。
  • 就像 @allord 说的链接都有一个 url 和一个 ng-click 。他们做一个或 th 其他不是两个。

角的方式做这件事

使用 ng-repeat 在 HTML 中查看和遍历在控制器中创建一个模型。

示例视图

<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;
  }
官方微信
官方QQ群
31647020