Question

我的应用中有一个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;
    }

All All工作正常，它将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);
      }
    }
  }])

Answer 1

ng-click不起作用，因为您没有编译返回给DOM的HTML。但是，您的代码存在许多问题，导致其无法正常工作。

$（＆＃34; .LIST组＆＃34）。追加（newListItem）; ＆＃39;列表组＆＃39;你不认为上课。
更重要的是，这并不是做Angular的正确方法。很少需要直接DOM操作，通常也不错。
像@allord一样，该链接有一个网址和一个ng-click。他们做其中一个或两个都没有。

这样做的角度

在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;
  }

Answer 2

您的代码

var newLink = $("<a>")
        .attr("url", commitsApiUrl)
        .attr("ng-click", 'buildCommits()')
        .addClass("list-group-item")
        .append(repoData.full_name);
      return newLink;

＆＃39; url＆＃39;到底是什么？锚标签的属性？试试这个代替它

var newLink = $("<a>")
        .attr("href", commitsApiUrl)
        .attr("ng-click", 'buildCommits()')
        .addClass("list-group-item")
        .append(repoData.full_name);
      return newLink;

我很困惑你为什么要在应用了href属性时点击要点击？您可以考虑使用具有数据属性的其他标记。

Answer 3

首先，您需要确保在添加ng-controller之前在html中定义了ng-app。我在你的代码片段中看不到它。如果它已经存在，那就不是问题了。

同样在您定义链接元素的代码段中，尝试使href成为＆＃39;＃＆＃39;并且在点击功能执行逻辑后执行导航，以确保它将被触发。

另外，请尝试将DOM操作从控制器移动到指令，因为它是最佳位置，并保持控制器仅用于执行业务逻辑。

Answer 4

你需要用$ compile服务编译你的字符串。注入＆＃39; $ compile＆＃39;使用您的控制器服务

喜欢：

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

AngularJS ng-click未触发

4 个答案: