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

我想在DOM元素上绑定AddEventListener纯javascript方法。 但是我使用AngularJS，它包含一个html文件，这个包含在AddEventListner函数绑定到DOM之后运行。因此，纯JavaScript找不到DOM。 我对纯JS这个词很陌生。我使用了jQuery，但在这个项目中，我只想使用AngularJS和pure JS

此代码由AngularJS包含

<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文件之前运行。所以它找不到任何游戏

---

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

您可以使用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);
    };
});

---

不幸的是，它不起作用。代码仍然在HTML之前运行。我想我忘记了一些东西。这段代码确保DOM启动后内部的代码运行，除非您没有共享某些东西