AngularJS ng点击未启动

AngularJS ng-click is not firing

本文关键字:启动 ng AngularJS      更新时间:2023-09-26

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