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
扫描二维码关注公众号，回复：
2105774 查看本文章
.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的域)来解析一级树
}
}
};
}]);2:angular ui-select2 默认选中第一个
<select id="selectSubSel" ui-select2="select2ptions" ng-model="firstDependTaskIdSel" multiple="multiple" ng-if="!defineProjObj.subProjSel">
<option ng-repeat="subProjSel in subProjSels" value="{{subProjSel.step_id}}" >{{dsTranslate.Label_Task}} {{subProjSel.step_seq}} : {{subProjSel.title}}</option>
</select>$scope.firstDependTaskIdSel = [$scope.subProjSels[0].step_id];
2.1格式要求
第一行在select2中显示不出来，第二行就OK。必须进行转换，key名不能有引号。
var data = [{ "id": 2996, "name": " 林红飞" }, { "id": 1468, "name": " 郭建刚" }, { "id": 3013, "name": " 韩亚利" }];
var datas = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];3:ng-style 中根据条件给样式
3.1 ng-style='{"left":($last?lastX:null)+"px","top":($last?lastY:null)+"px"}'
3.2 ng-style="{ 'background-color': '#{{colorHexObj.color}}', 'opacity': {{colorHexObj.color}} != '' ? (0.9) : undefined }"
4:ng-switch-when 不支持表达式写法
如 $scope.name="444" ng-switch-when=“name” 或者 ng-switch-when=“{{name}}” 都不行 建议
给用
<div ng-if="someCondition">
...
</div>
<div ng-else-if="someOtherCondition">
...
</div>
<div ng-else>
...
</div>https://github.com/zachsnow/ng-elif
5:date过滤器不起作用
js
app.filter('myDateFormat', function myDateFormat($filter){
return function(text){
var tempdate= new Date(text.replace(/-/g,"/"));
return $filter('date')(tempdate, "MMM-dd-yyyy");
}
});
<td>
{{ blog.created_at | myDateFormat }}
</td>6: select change value 后 取得改变value 前的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selected" ng-change="change(selected, oldValue)" ng-click="oldValue = selected">
<option ng-repeat="x in sites" value="{{x.url}}" g>{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.change = function(newValue, oldValue){
alert(newValue)
alert(oldValue)
}
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
<p>该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。</p>
</body>
</html>
7：不能输入特殊字符
var verify=";+"
var pattern = new RegExp("["+verify+"]","gi");
var realkey=$scope.dataVal
if(pattern.test(realkey)){
$scope.dataVal=realkey.replace(pattern,"")
$rootScope.openTips(project_translate.Page4_Label_Field_not_permit+": "+verify);
return false;
}
8:用css设置带有！important的行内样式
ele.css("cssText", "background:red !important;")9：直接给iframe ng-src 赋值 前台报错
解决方式
$sce.trustAsResourceUrl(data.url);10：ie 不支持在 select option 中绑定的事件。
解决办法 是给select 绑定。
无效 的 ng-dblclick="enterColumnName(x,$index)" 事件
<select name="overviewData" id="overviewData" multiple="multiple" size="15" ng-model="overviewDataVal" ng-change="overviewDataChange(overviewDataVal)" >
<option ng-repeat="x in overviewDataOpts track by $index" ng-dblclick="enterColumnName(x,$index)" value="{{$index}}={{x.id}}" val="{{x.val}}" val2="{{x.id}}" class="{{x.color}}" title="{{x.name}}" label="{{x.name}}">{{x.name}}</option>
</select>有效事件
<select name="overviewData" id="overviewData" multiple="multiple" size="15" ng-model="overviewDataVal" ng-change="overviewDataChange(overviewDataVal)" ng-dblclick="enterColumnName(overviewDataVal)" >
<option ng-repeat="x in overviewDataOpts track by $index" value="{{$index}}={{x.id}}" val="{{x.val}}" val2="{{x.id}}" class="{{x.color}}" title="{{x.name}}" label="{{x.name}}">{{x.name}}</option>
</select>
借助value 拿到 当前操作的option 索引
$scope.enterColumnName=function(x){
var index= x[0].split("=")[0];//拿到option 的索引
var x = $scope.overviewDataOpts[index];
console.log(x)
var modalInstance = $uibModal.open({
templateUrl : baseUrl+'html/admin/overview/modal/enter.column.name.modal.html',
controller : 'enterColumnNameToOverviewCtr',
backdrop:"static",
size:"addTaskCodeField",
resolve : {
modalObj :{
scope:$scope,
dataList:x,
index:index
}
}
});
}12：替换空格
var test="this is a test";
test=test.replace(/ /ig, "");
alert(test);14： angular 中 用chosen 在外部设置值 没有更新
将其封装成 指令即可
https://stackoverflow.com/questions/18262442/chosen-angular-directive-doesnt-get-updated
.directive('chosen', function() {
var linker = function (scope, element, attrs) {
var list = attrs['chosen'];
scope.$watch(list, function () {
element.trigger('chosen:updated');
});
scope.$watch(attrs['ngModel'], function() {
element.trigger('chosen:updated');
});
element.chosen();
};
return {
restrict: 'A',
link: linker
};
});