due to the use of ngTable, and the requirement that the title of the table can be opened (so resize), is used, every time the small corner of resize is pulled, the sorting of ngTable will be triggered incorrectly. I want to remove the "ng-click="sortBy ($colum,$event)"" from the th and dynamically place the ngClick on the span contained in the th.
I used $compile, in the instruction. After running it, I can see that there is a ng-click, on the html, but there is no Event Listeners, and there is no response to the natural click. Ask the gods for help!
the following is the brief code
the html code before executing the instruction:
<th title ng-click="sortBy($colum,$event)" >
<div>
<span>title1 </span>
</div>
</th>
html code after executing the instruction:
<th title>
<div>
<span ng-click="sortBy($colum,$event)" >title1 </span>
</div>
</th>
instruction JS code:
.directive("tableTitle",function($parse,$compile){
return{
restrict:"A",
link:function(scope,elem,attrs,controller){
scope.$watch("params",function(newParams,oldParams){
if(!(newParams === oldParams || !newParams)){
var trTitle = xxxx; //ngTable
var thArray = trTitle.children; //
//thArray[1]
var ngclick = thArray[1].attributes.getNamedItem("ng-click").cloneNode(true);
var span = thArray[1].children[0].children[0];
var spanWithNgClick = angular.copy(span);
angular.element(spanWithNgClick)[0].attributes.setNamedItem(ngclick); //ngclick
thArray[1].children[0].renmoveChild(span); //ngclickspan
var $html = angular.element(thArray[1].children[0]).html(
$compile(spanWithNgClick.outerHtml)(scope));
angular.element(thArray[1].children[0]).append($html); //ngclickspan
angular.element(thArray[1]).removeAttr("ng-click");
var th = angular.copy(thArray[1]);
trTitle.removeChild(thArray[1]); //ngclickth
trTitle.appendChild(th);//ngclickth
}
})
},
}
});
html code photo after execution (this is a company project, in the intranet, I can"t take a screenshot, so I have to take a picture):
