【问题:发现与解决】angularJs指令在dijit控件中的使用
2024-10-19 22:31:43
由于公司主要用的JS框架是DOJO,最近又运用了angularJs。因此,不可能避免的遇到dojo控件和angular指令(directive)共用时遇到的一些问题,问题如下:
<input id="inheritCbx_modelPara" type="checkbox" data-dojo-type="dijit/form/CheckBox" ng-model="isInheritPara" ng-change="showInheritPara()" value="继承"/><br/>
我想用dijit的CheckBox控件的同时给这个input添加ng-model和ng-change这两个指令。显然上面的代码是愚蠢的,因为代码中的angular指令更不会被dijit的控件给解析,控件解析后的html如下:
我们写的input被dijit解析成了如上的代码,因此我必须想办法在这个div里面的input中添加ng-model和ng-change指令并且让angular的解析方法$compile去解析指令添加之后的input。
于是乎,我在controller里面做了如下操作:
var link = $compile(query("#inheritCbx_modelPara")[0].outerHTML.replace(/>/, " ") + 'ng-model="isInheritPara" ' + 'ng-change="showInheritPara()">');
var node = link($scope);
query("#dijitCheckBox")[0].removeChild(query("#inheritCbx_modelPara")[0]);
query("#dijitCheckBox")[0].appendChild(node[0]);
这样一来,虽然指令被正确的加载了,但是却发现生成的CheckBox控件被click和focus时候的样式却无法正常显示了,看了该控件的代码后我发现CheckBox控件被加载的时候在input中监听了click和focus事件,然而当我们用$compile去重新解析input的时候,里面的click和focus事件被angular重新监听了,因此才会出现控件样式无法正常显示的问题。然后我在确定了不影响控件自身显示的情况下修改了CheckBox控件的template.html文件,把监听的click、focus事件放在input的父div上,这样就不会和angular发生冲突了。
<div id="dijitCheckBox" class="dijit dijitReset dijitInline"data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation"
>
<input ${!nameAttrSetting} type="${type}" role="${type}" aria-checked="false" ${checkedAttrSetting} class="dijitReset dijitCheckBoxInput"/>
</div>
最新文章
- C#面向对象设计模式纵横谈——1.面向对象设计模式与原则
- Visual Studio 2013 Web开发
- 浅谈Slick(1)- 基本功能描述
- 深入解析PHP中的(伪)多线程与多进程
- as3 中文转拼音
- DB SQL Monitor 阻塞及等待事件监控工具
- MySQL内核:InnoDB存储引擎 卷1
- 深入理解CSS背景
- sharepoint2010问卷调查(1)-实现问卷的图片调查(采用JS实现)
- HDU 4651 Partition 整数划分,可重复情况
- Django之CSRF 跨站请求伪造
- 生成64位代码的mdb数据库连接串Provider的设置
- PIC32MZ 通过USB在线升级 -- USB HID bootloader
- [Codeforces]762F - Tree nesting
- TensorFlow-谷歌深度学习库 文件I/O Wrapper
- Asp.Net Core SignalR 与微信小程序交互笔记
- Linux系统中/etc/rc.local和/etc/rc.d/rc.local的区别
- react native 渐变组件 react-native-linear-gradient
- sqoop上传数据到hdfs,并用hive管理数据。
- Linux命令(二十三) 磁盘管理命令(一) df,du,tune2fs
热门文章
- [Alpha]Scrum Meeting#10
- java ListNode链表数据结构
- Pycharm 报错 AttributeError: module &#39;pip&#39; has no attribute &#39;main&#39;
- 三、OPENERP 中的对象关系类型
- Mac 10.12安装VirtualBox
- 开源一个Java Class实现Openfire登陆、推出、消息发送,方便其他系统集成IM功能了
- asp.net 网站在Apache下的配置,就这么简单
- flot中文详解
- jstack 结果查看
- Bootboxjs快速制作Bootstrap的弹出框效果