jQuery的或不jqlite里面的元素＆lt工作; NG-视图＆gt;＆LT; / NG-视图＆gt; [英] jQuery or jqlite not working with elements inside <ng-view></ng-view>

问题描述

index.html的：

index.html:

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

</ng-view>
</div>

general.html

general.html

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

JavaScript的

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');
    });
});

它的工作原理与类=AAA的元素，但对里面的元素

It works for the element with class="aaa" but doesn't work for the elements inside the

 <ng-view></ng-view>

jQuery的code是控制器之外。

The jQuery code is outside of controller.

推荐答案

文件准备jQuery的前角已完成加载可能发生（它注入​​了NG-视图例如之前）。如果你需要的脚本系统，例如require.js上使用这更是真实的。

document ready in jquery can happen before angular has finished loading (e.g. before it injects the ng-view). This is even more true if you use an on demand script system like require.js.

因此​​，你应该

答：使用角度的版本的文件准备就绪，

A: Use Angular's version of document ready,

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

A：（角路）

打造你想要的任何自定义元素的角度指令，或窗体或部件，或W / E你正在建设（compartmentilize它），这样就可以处理指令链接或编译的功能，在这里你就可以订阅到元件（如一个锚）的事件，并获得它的事件对象。

Build an angular directive for any custom elements you want, or a form, or a widget, or w/e you are building (compartmentilize it) so that you can handle the directives link or compile function, where you can then subscribe to events on the element (like an anchor) and have access to it's event objects.

这篇关于jQuery的或不jqlite里面的元素＆lt工作; NG-视图＆gt;＆LT; / NG-视图＆gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！