jQuery 或 jqlite 不适用于 <ng-view></ng-view> 中的元素答案

【问题标题】：jQuery or jqlite not working with elements inside <ng-view></ng-view>jQuery 或 jqlite 不适用于 <ng-view></ng-view> 中的元素
【发布时间】：2015-10-02 04:16:30
【问题描述】：

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 代码在控制器之外。

【问题讨论】：

你的<ng-view></ng-view> 应该是<div ng-view></div>
我把它们改成了<div ng-view></div>，但这没什么区别。 @AdityaParab
为什么不使用ng-click最大化角度特征
我想用“this”来指定一个类的元素，并用它的子元素做一些事情。@EuphoriaGrogi

标签： javascript jquery angularjs jqlite

【解决方案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：（角度方式）

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

【讨论】：

实际上，现在我什至不使用角度控制器，我为所有内容制作指令并使用 bindToController，因此我不必使用 $scope 对象来摆脱 $scope 继承问题。 teropa.info/blog/2014/10/24/… bindToController 和指令真正酷的一点是，您可以将指令控制器设为全局或实例化。这意味着您可以设计一个指令，使用其控制器的相同实例，或创建新实例。
我把 $(document) 改成了 angular.element(document) 但还是不行。