AngularJS中ng-click绑定的test()函数无法触发如何解决？

我来帮你排查一下这个ng-click无法触发test()函数的问题，从你给出的代码来看，核心问题出在控制器指令和循环指令的作用域冲突上，下面我一步步给你分析和解决：

问题根源：ng-controller与ng-repeat放在同一元素 #

你把ng-controller="bilgiyarismasiCtrl"和ng-repeat="x in sorular"写在了同一个<div>标签上。在AngularJS中，ng-repeat的优先级高于ng-controller，这会导致每循环一次sorular里的条目，就会创建一个全新的bilgiyarismasiCtrl控制器实例。这不仅会重复发起$http请求（每个实例都跑一遍请求逻辑），还会让按钮的ng-click绑定到混乱的子作用域中，最终导致函数无法正常触发。

修复步骤 #

1. 调整HTML结构，分离控制器与循环 #

把ng-controller移到ng-repeat的父元素上，让整个循环都处于同一个控制器作用域下：

<div ng-controller="bilgiyarismasiCtrl">
  <div ng-repeat="x in sorular"> 
    <div class="row text-center" style="margin: 50px 250px 50px 250px;"> 
      <div class="col-md-12" style="padding:90px; background-color:gray; color:white;"> {{ x.SORU_ICERIGI }} </div> 
      <div class="col-md-6" style="padding:50px; background-color:white;"> 
        <button ng-click="test()" class="btn btn-primary btn-lg">{{ x.A_SIKKI }}</button> 
      </div> 
      <div class="col-md-6" style="padding:50px; background-color:white;"> 
        <button ng-click="test()" class="btn btn-primary btn-lg">{{ x.B_SIKKI}}</button> 
      </div> 
    </div> 
    <br /><br /><br /> 
  </div>
</div>

2. 优化控制器代码（可选但推荐） #

给控制器加上初始化和错误处理逻辑，避免数据加载失败时页面异常，同时让代码更健壮：

var app = angular.module("module", ["ngRoute"]); 

app.config(function ($routeProvider) { 
  $routeProvider.when("/", { 
    templateUrl: "bilgiyarismasi.html", 
    controller: "bilgiyarismasiCtrl" 
  }); 
}); 

app.controller("bilgiyarismasiCtrl", function ($scope, $http) { 
  // 初始化题目数组，避免页面加载时出现未定义错误
  $scope.sorular = [];
  
  $http.get("http://localhost:53438/api/BilgiYarismasi/GetSorular")
    .then(function (response) { 
      $scope.sorular = response.data; 
    })
    // 增加错误捕获，方便排查API请求问题
    .catch(function(error) {
      console.error("加载题目失败，请检查API地址:", error);
    }); 

  $scope.test = function () { 
    console.log("test函数已触发！");
  }; 
});

3. 确认依赖脚本已正确引入 #

确保你的HTML页面顶部已经加载了AngularJS和ngRoute的核心脚本：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
<!-- 引入你的控制器脚本 -->
<script src="app.js"></script>

验证方法 #

修改完成后，刷新页面，打开浏览器开发者工具的控制台，点击按钮如果看到test函数已触发！的日志，就说明问题解决了。

内容的提问来源于stack exchange，提问作者Mirzaloglu