Question

我根据行大小生成分页按钮。我的问题是当我在AngularJS函数中创建按钮并将其绑定到元素时按钮显示正确，但是ng-click不起作用。

这是我的代码：

   var app = angular.module('myapp', []);
var url = "<?php echo base_url(); ?>"+"index.php/";
var rowcount = <?php echo $this->session->userdata("count"); ?>;


app.controller('myctrl', function($scope, $http, $sce)
{
    $http.get(url+"exammanager/0/10").then(function(response) 
    {
        $scope.myData = response.data.exams;        
        $scope.refresh();                   
    });

    $scope.refresh = function()
    {
        $http.get(url+"exammanager/0/10").then(function(response)
        {           
            $scope.myData = response.data.exams;    
            num = Math.ceil(rowcount/10);
            counter = 0;
            var buttons = "";
            for(i = 1;i <= num; i++)
            {
                if(i != num)
                    buttons += "&nbsp<button ng-click=\"pagescopeclick(\'"+url+"index.php/exammanager/"+counter+"/10\')\" >"+i+"</button> |";
                else 
                    buttons += "&nbsp<button ng-click=\"pagescopeclick(\'"+url+"index.php/exammanager/"+counter+"/10\')\" >"+i+"</button> ";
                counter = counter + 10;         
            } 
            $scope.count = $sce.trustAsHtml(buttons);                   
        });     
    }//Refresh controller

    $scope.pagescopeclick = function(val)
    {alert();
        $http.get(val).then(function(response)
        {           
            $scope.myData = response.data.exams;                
        });     
    }//pagescopeclick move to the next page without refresh
});

Answer 1

Pankaj是正确的，你需要使用$ compile。尝试编辑你的刷新函数，你可以在你的for循环之后使用$ compile。（不要忘记将$ compile作为依赖项注入）

$scope.refresh = function() {

  $http.get(url+"exammanager/0/10").then(function(response)
  {           
      $scope.myData = response.data.exams;    
      num = Math.ceil(rowcount/10);
      counter = 0;
      var buttons = "";
      for(i = 1;i <= num; i++)
      {
          if(i != num)
              buttons += "&nbsp<button ng-click=\"pagescopeclick(\'"+url+"index.php/exammanager/"+counter+"/10\')\" >"+i+"</button> |";
          else 
              buttons += "&nbsp<button ng-click=\"pagescopeclick(\'"+url+"index.php/exammanager/"+counter+"/10\')\" >"+i+"</button> ";
          counter = counter + 10;         
      } 
      $compile( buttons )( scope )
      $scope.count = $sce.trustAsHtml(buttons);                   
  });     

}

Answer 2

我解决了这个问题：

$scope.refresh = function()
{
    $http.get(url+"exammanager/0/10").then(function(response)
    {           
        $scope.myData = response.data.exams;    
        num = Math.ceil(rowcount/10);
        counter = 0;
        var buttons = "";
        for(i = 1;i <= num; i++)
        {
            if(i != num)
                buttons += "<button ng-click='pagescopeclick(\""+url+"exammanager/"+counter+"/10\")' >"+i+"</button>";
            else 
                buttons += "<button ng-click='pagescopeclick(\""+url+"exammanager/"+counter+"/10\")' >"+i+"</button> ";

            counter = counter + 10;         
        }              
        angular.element(document.getElementById('count')).html($compile(buttons)($scope));                  
    });     
}

如何使用ng-click绑定AngularJS按钮？

2 个答案: