【问题：发现与解决】angularJs指令在dijit控件中的使用

  由于公司主要用的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>