收集关于angular的一些常见问题 总结

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的域)来解析一级树
			}
		}
	};
}]);