AngularJS 过坑大法

AngularJS 过坑大法

都是血泪

directive 自定义指令中 ng-repeat 出的 ng-clikc 未生效

angularJS 版本 1.7.8

解决方案:

return{
  template:`<div>...</div>`,
  link:function(){
    // 自定义内部方法
    $scope.fnName = function(){
      /....
    }
  }
}

template代码，用div包裹一级，具体缘由是scope做用域隔离问题。

只能输入数字

Ng-pattern 指令

<input type="text" ng-pattern="/^[A-Za-z0-9]+$/" />

ng-class 指令多类用法

语法说明

<div ng-class="{'className1':expression1,'className2':expression2}">
  
</div>

例子

<div ng-class="{'active':(o.InTask == 1 || o.InTask == 2),'JHX':o.State}"></div>

ng-repeat 指令

在使用 ng-repeat 进行多级嵌套循环时，最好从第一层根开始，使用$index 键值，防止节点丢失子集循环失败。

<!-- 根循环 -->
<div ng-repeat="(key,obj) in ArrList track by $index">
    <!-- 二级循环 -->
  	<ul ng-repeat="(key_ul,obj_ul) in obj.U_ArrList track by $index">
        <!-- 三级循环 -->
    		<li ng-repeat="(key_li,obj_li) in obj_ul.li_arr track by $index"></li>  
      	
  	</ul>
</div>

ng-指令 获取 html DOM

非必要状况下不要经过DOM对象进行操做，经过数据处理。特殊状况，如第三方插件使用。

<div ng-click="test($event.target)">

</div>

使用内置方法，返回 jq 对象

$scope.test = function(e){
	angular.element(e);
}