Question

我正在编写一个应用程序来绘制数据并以表格的形式显示它。 Angular JS用于排序和分页。我使用Angular中的函数注入了分页div，它构建了一个字符串，并将其设置为$ scope.pagination变量。问题是注入的HTML中的ng-click函数在单击时无法识别。我假设这是因为在呈现页面时它们不存在。

<html ng-app="listingsApp">   
<body ng-controller="pageController" ng-init="type=0">
<div class="pagination" ng-bind-html="paginate"></div>

  var listingsApp = angular.module('listingsApp', []);

  listingsApp.controller('pageController', function($scope, $sce, $filter, $http) {
    $scope.BuildPaginationHtml = function(showPage) {
      pageString = "<span class=\"paginationItem \" ng-click=\"GoToPage(" + i + ")\"> " + i + " </span>";
      $scope.pagination = pageString;
    }
  }

此处单击跨度不会转到GoToPage函数。我有一个控制台日志来验证它。页面上的所有其他点击事件都有效。

Answer 1

对于动态HTML，您必须使用$compile

listingsApp.controller('pageController', function ($scope, $sce, $filter, $http, $compile) {
    $scope.BuildPaginationHtml = function(showPage) {
        pageString = $compile("<span class=\"paginationItem \" ng-click=\"GoToPage(" + i + ")\"> " + i + " </span>")($scope);
        $scope.pagination = pageString;
    }
});

Angular JS绑定HTML函数无法识别

1 个答案: