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);
}