javascript - Angular JS : binding a click event after angular renders HTML DOM

Question

我是第一次使用 AngularJS，我做了一些搜索但找不到满意的答案。我正在尝试从服务器获取一些数据并在页面加载时将其绑定(bind)到页面 html 元素。但我还必须绑定(bind)那些 Angular 生成的 html 元素的点击事件。

app.controller('searchController', ['$scope','$timeout','service','$sce', function($scope, $timeout,service, $sce) {
 {
     $scope.results=[];
     service.getResults(function(data) {
       results=data;
      });// fetches data from server;

 }  

我正在使用 ajax 调用获取一些结果并更新范围变量。在我的 html 中，我使用 ng-repeat 并绑定(bind)到这个数组，如下所示

<div ng-controller="searchController">
   <input type="text" class="result_text" ng-repeat="result in results" value="{{result.text}}"></input>

</div>

现在我想在所有具有 result_text 类的元素上绑定(bind)点击事件

目前我正在使用 $watch 和 $timeout 执行此操作

$scope.$watch("results", function (value) {  

$timeout(function() {
   $(".result_text").click(function(){  //do something });
     }, 1);
 });

这是正确的方法吗？如果我不使用 $timeout，它会在 angular 呈现 html 之前运行点击绑定(bind)代码。

Answer 1

不，这不是正确的方法。有一些指令可以做到这一点。

将 Controller 中丑陋的 $(".result_text").click` 替换为:

data-ng-click="someFunction()"  (https://docs.angularjs.org/api/ng/directive/ngClick) 

在您的模板中。

你的结果可能是这样的:

service.getResults(function(data) {
    $scope.results=data;
});