javascript - 通过 http 请求加载的元素的 Angular 单击事件不起作用

Question

代码笔链接:http://codepen.io/gauravcoder/pen/vLWEjJ?editors=101 我是 Angular JS 的新手

我点击了一些元素，我现在对其发出警报，它工作正常问题是，当通过 http 请求加载元素时，点击事件不起作用。

html 代码:(前两个非 ajax 元素的警报仅在其他通过 ajax 调用加载的元素不起作用的地方有效)

<ion-list>
    <div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item No Ajax call
    </div>
    <div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item No Ajax call
    </div>
    <div ng-repeat="item in items" style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item Ajax Call: {{ item.username }}
    </div>

</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

</ion-content>

js代码

angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope,$http) {
    $("div#clickit").click(function() {
        alert('hey');
    });


    $scope.noMoreItemsAvailable = false;
    $scope.currentPage = 0;
    $scope.loadMore = function() {
        $http.get('http://mourjewels.com/www/stones2.php?page='+$scope.currentPage).success(function(items) { 
            $scope.currentPage += 1;
            $scope.items = $scope.items.concat(items.data);
            console.log(items.count);
            $loopcount =  Math.ceil(items.count/10);
            console.log($loopcount);
            $scope.$broadcast('scroll.infiniteScrollComplete');
            if($scope.currentPage >= $loopcount){
                $scope.$broadcast('scroll.infiniteScrollComplete');
                $scope.noMoreItemsAvailable = true;
            }
        });

      };

      $scope.items = [];
});

Answer 1

这是因为 Angular 在将 AJAX 加载的元素注入(inject)到 DOM 之前执行您的 Controller 脚本。

无论如何，在 Angular 中肯定有一种不同的方法。您可以使用 Angular 的 ng-click 指令。

在你的 Controller 中，

$scope.doSomething = function () {
    // Does something
};

在您的 HTML 中，

<div ng-click="doSomething()"></div>

ng-repeat、ng-click 之类的东西叫做 Directives在 Angular 中，只是对原生 DOM 的自定义扩展。 ng- 前缀指令包含在 Angular 核心中。每次 AngularJS 更新 DOM 时，它都会收集 DOM 中存在的指令并执行指令。因此，在您的情况下，执行了 ng-repeat 和 ng-click 指令。 ng-click 基本上注册了 onclick DOM 事件处理程序以在当前范围内执行给定的函数 (doSomething)。因此，无论以何种方式或何时注入(inject) DOM，它都会起作用。

当然是非常简单的解释。但我希望它对你有意义:)