"Problem: Discovering and resolving" angularjs directives used in Dijit controls

Because the company's main use of the JS framework is dojo, and recently the use of ANGULARJS. Therefore, it is not possible to avoid encountering some of the problems encountered by the dojo control and the angular Directive (Directive), as follows:

<input id= "Inheritcbx_modelpara" type= "checkbox" Data-dojo-type= "Dijit/form/checkbox" ng-model= "  Isinheritpara "ng-change=" Showinheritpara () "value=" Inheritance "/><br/>

I want to use the Dijit CheckBox control to add Ng-model and ng-change to this input at the same time. Two instructions. Obviously the above code is stupid, because the angular directive in the code is not parsed by the Dijit control, the control parses the following HTML:

The input we wrote was parsed into the Dijit code, so I had to find a way to add the Ng-model and ng-change instructions to the input in this div and let angular's parsing method $compile to parse the input after the instruction was added.

So I did the following in the 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]);

This way, although the instruction was loaded correctly, it found that the generated CheckBox control was not displayed correctly by the click and focus styles. After looking at the code for the control, I found that the CheckBox control was loaded with the Click and focus events in input, but when we used $compile to re-parse input, the click and focus events were angular re-listened. As a result, the control style does not appear correctly. I then modified the CheckBox control's template.html file without affecting the display of the control itself, placing the click and focus events on the parent div of input so that there would be no conflict with 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>

"Problem: Discovering and resolving" angularjs directives used in Dijit controls