Javascript - Javascript 函数在 AngularJS 加载 HTML 元素之前运行，因此函数不会获取元素

Question

我想在 DOM 元素上绑定 AddEventListener 纯 JavaScript 方法。 但我使用包含 html 文件的 AngularJS，这包括在 AddEventListner 函数绑定到 DOM 之后运行。所以纯 JavaScript 找不到 DOM。 我是纯 JS 词的新手。我使用了 jQuery，但在这个项目中我只想使用 AngularJS 和纯 JS。 :)

AngularJS 包含（ng-include）此代码

<div class="col-xs-3 col-md-1 col-xs-offset-2 col-md-offset-0 padding-left-right-0">
                <span class="game game-home" ng-show='gameEvent.game_home > 0' ng-click="addToSlip(gameEvent.id, gameEvent.name, gameEvent.game_home, 'H', gameEvent.number)" style="cursor: pointer;">
                    <span class="slip-game-event-add-button">
                        {{ gameEvent.game_home | number:2 }}
                    </span>
                    <span class="badge">{{ gameEvent.taken_home}}</span>
                </span>
            </div>
            <div class="col-xs-3 col-md-1 padding-left-right-0">
                <span class="game game-draw" ng-show='gameEvent.game_draw > 0'ng-click="addToSlip(gameEvent.id, gameEvent.name, gameEvent.game_draw, 'D', gameEvent.number)" style="cursor: pointer;">
                    <span class="slip-game-event-add-button">
                        {{ gameEvent.game_draw | number:2 }}
                    </span>
                     <span class="badge">{{ gameEvent.taken_draw}}</span>
                </span>
            </div>
            <div class="col-xs-3 col-md-1 padding-left-right-0">
                <span class="game game-away" ng-show='gameEvent.game_away > 0' ng-click="addToSlip(gameEvent.id, gameEvent.name, gameEvent.game_away, 'V', gameEvent.number)" style="cursor: pointer;">
                    <span class="slip-game-event-add-button">
                        {{ gameEvent.game_away | number:2 }}
                    </span>
                    <span class="badge">{{ gameEvent.taken_away}}</span>
                </span>
            </div>

这是我的纯 javascript 文件：

'For.the.view';

(function() {
    var gameDom = document.getElementsByClassName("game");

    for (var i=0;i<gameDom.length;i++) {
        gameDom[i].addEventListener('click', clickEventForThis, false);
    };
})();

function clickEventForThis(){
    console.log("hello");
};

不幸的是，这个 javascript 代码在 AngularJS 加载 HTML 文件之前运行。所以它找不到任何 gameDoms...

是的，最简单的方法是使用“onclick”属性，但我认为这不是一个好的解决方案。

Answer 1

您可以使用 angular.ready 事件：

angular.element(document).ready(function () {
    var gameDom = document.getElementsByClassName("game");

    for (var i=0;i<gameDom.length;i++) {
        gameDom[i].addEventListener('click', clickEventForThis, false);
    };
});