jQuery或jqlite不能使用<ng-view></ng-view>中的元素

Question

index.html：

<div>
<p class="aaa">ppp</p>
<ng-view>

</ng-view>
</div>

general.html

<p class="bbb">pppppp</p>

javascript

var app = angular.module('StarterApp', ['ngMaterial','ngRoute','ngImgCrop']);

app.config(function($routeProvider){
        $routeProvider
            .when('/general',
                {
                    templateUrl:'../view/general.html'
                })
});

$(document).ready(function() {
    $(".aaa").on("click",function(){
         alert('clicked');
    });
    $(".bbb").on("click",function(){
         alert('clicked');
    });
});

它适用于class=为“aaa”的元素，但不适用于

 <ng-view></ng-view>

jQuery代码在控制器外部。

Answer 1

在jquery中准备好的文档可能发生在angular完成加载之前(例如，在它注入ng-view之前)。如果您使用require.js这样的随需应变脚本系统，情况就更是如此。

因此，您应该

答:使用Angular的文档ready版本，

angular.element(document).ready(function () {
    $("#aaa").on("click",function(){
     alert('clicked');
    });
    $("#bbb").on("click",function(){
         alert('clicked');
    });
});

B：(角度方式)

为你想要的任何自定义元素构建一个angular指令，或者一个表单，或者一个小部件，或者你正在构建的(划分它)，这样你就可以处理指令链接或编译函数，然后你可以订阅元素上的事件(比如一个锚)，并可以访问它的事件对象。