1:angularjs 指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效
在directive的link中有一个$http请求,当请求完成后根据返回的值动态做element.append('......');这个操作,能显示没问题,可问题是我动态组的HTML里面有ng-click,发现显示出来的内容根本不执行ng-click绑定的方法!
这个是因为异步返回之后,指令的编译已经完成,因此需要动态编译。
使用$compile服务! 在link方法中对返回后的HTML代码经过$compile服务处理后再插入:
var el=$compile("HTML代码")(scope); element.append(el);
以下是我根据后台返回数据创建HTML 插入dom
html
<div data-angular-treeview="true" data-tree-id="abc" data-tree-model="treedata" data-node-id="id" data-node-label="label" data-node-children="children" > </div>
js
.directive( 'treeModel',['$compile','$$ajaxCall',function( $compile,$$ajaxCall ) { return { restrict: 'A',link: function ( scope,element,attrs ) { var treeId = attrs.treeId; var treeModel = attrs.treeModel; var template = '<ul>' + '<li data-ng-repeat="node in ' + treeModel + '" data-ng-click="' + treeId + '.selectNodeHead(node,$event)" id="li_{{node[0]}}">' + '<i class="fa expanded" ng-class={true:"fa-plus-square-o",false:"fa-minus-square-o"}[!node.collapsed] ></i>' + '<span folderName="{{node[1]}}" title="{{node[1]}}">{{node[1]}}</span>' + '<div data-ng-hide="!node.collapsed" id="Ch_{{node[0]}}">'+ '</div>' + '</li>' + '</ul>';//生成一级树 if( treeId && treeModel ) { if( attrs.angularTreeview ) { scope[treeId] = scope[treeId] || {}; //点击事件 scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function(selectedNode,e){ scope.selectedNode=selectedNode[0] $$ajaxCall.getQuery("datasheetCellImage/getFileDataList?folderId="+selectedNode[0]+"&page="+scope.pageNum,"",function(data){ childScope = scope.$new(); //新建一个域 childScope.treedataCh =data[0] childScope.node=selectedNode; scope.linkDalFiles=data[1][1]; scope.totalItems=data[1][0]; var navStrArr = new Array() jQuery("span.selected").each(function(i,v){ navStrArr.push(jQuery(this).attr("folderName")); }) scope.linkDalFilesLevel = navStrArr.join(">");//生成上面的folderName var template2 = '<ul>' + '<li data-ng-repeat="node in treedataCh" data-ng-click="' + treeId + '.selectNodeHead(node,$event)" id="li_{{node[0]}}">' + '<i class="fa expanded" ng-class={true:"fa-plus-square-o",false:"fa-minus-square-o"}[!node.collapsed] ></i>' + '<span folderName="{{node[1]}}" title="{{node[1]}}">{{node[1]}}</span>' + '<div data-ng-hide="!node.collapsed" id="Ch_{{node[0]}}">'+ '</div>' + '</li>' + '</ul>'; $("#Ch_"+selectedNode[0]).html('').append( $compile( template2 )( childScope ) );//解析 子树 和指定一个子域 $(e.target).find("span").addClass("selected").end().siblings("li").find("span").removeClass("selected") selectedNode.collapsed = !selectedNode.collapsed; }) $("#li_"+selectedNode[0]).find("span").removeClass("selected") $("#li_"+selectedNode[0]).find("span").eq(0).addClass("selected") $("#li_"+selectedNode[0]).siblings("li").find("span").removeClass("selected") $("#li_"+selectedNode[0]).parents("li").siblings("li").find("span").removeClass("selected") e.stopPropagation(); }; } element.html('').append( $compile( template )( scope ) );//用父域(就是所在controller的域)来解析一级树 } } }; }]);