angular.js - 为什么给 Angular 指令绑定事件无法生效
本文介绍了angular.js - 为什么给 Angular 指令绑定事件无法生效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
因为刚刚接触 Angular,所以有些概念还很模糊,对于这个问题尝试通过 Google 查找答案,但并未找到合适的解答,所以想在这里请教一下各位,这里是一个大概的代码:
<div ng-repeat="item in list" class="need-another-js"></div>
<script>
$('.need-another-js').click(function(){
// do something
})
</script>
如果把 ng-repeat
去掉,JS 代码的效果可以实现,但是加上 ng-repeat
后,效果就不存在,这里是因为 Angular 作用域的问题吗?
解决方案
这和作用域没有半毛钱关系,纯粹是一种典型的jquery
=> angular
的错误表现形式。
AngularJS
的指令,作为一种声明式的API,玩法和jquery
那套命令式API有很大区别,你在混着用的时候,很容易出错。
基本常识错误,
id
是用来表示元素唯一性的,可你用在了ng-repeat
上,也就是说可能出现若干个元素的id
都是need-another-js
,这和jquery
、angular
都没关系,纯粹是html
知识上的缺失ng-repeat
作为angular
提供的指令,需要经过angular
的compile
、linking
过程,导致,当你的$('#need-another-js').click
在为#need-another-js
元素注册事件的时候,这个元素其实还没有被angular
生成到DOM
中,这才是没生效的关键。
单就你这个例子来讲,可以做如下修改使之生效:
<div ng-repeat="item in list" class="need-another-js"></div>
不用
id
用class
<script>
$(document).on('click', '.need-another-js', function(){
// do something
});
</script>
虽然我不推荐这种写法,但你既然选择了"命令式"和声明式
API混用,想必有你的理由。
补充:
关于angular
是如何工作的,我想对于刚入门的同学,看看官网这个介绍很有帮助:
文档地址: concepts
这篇关于angular.js - 为什么给 Angular 指令绑定事件无法生效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文