javascript - jQuery 或 jqlite 不能使用里面的元素

Question

索引.html：

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

</ng-view>
</div>

一般.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

在 Angular 完成加载之前（例如，在它注入 ng-view 之前），jquery 中的文档准备就绪。如果您使用像 require.js 这样的按需脚本系统，则更是如此。

因此，您应该

A: 使用 Angular 的文档版本，

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

B：（角度方式）

为您想要的任何自定义元素、表单、小部件或您正在构建的任何自定义元素构建一个角度指令（对其进行划分），以便您可以处理指令链接或编译函数，然后您可以在其中订阅事件元素（如锚点）并可以访问它的事件对象。