2019獨角獸企業重金招聘Python工程師標準>>>

傳遞參數給directive

<my-dir?myindex="$index"?title="t1"></my-dir>app.directive('myDir',?function?()?{return?{restrict:?'E',scope:?{myindex:?'='，title:?'@'},template:'<div>{{myindex}}</div>',link:?function(scope,?element,?attrs){console.log('test',?scope.myindex)}};})

參數綁定根據需要，提供以下幾種功能：

• =?is two-way binding

• @?simply reads the value (one-way binding)

• &?is used to bind functions

DOM元素動態綁定CSS

可以使用ng-class命令，判斷邏輯條件來動態的綁定css class給tag，基礎語法為：

option?1: function?ctr($scope){$scope.test?=“classname”; }<div?class=”{{test}}”></div>option?2: function?Ctr($scope)?{?$scope.isActive?=?true; }<div?ng-class="{true:?'active',?false:?'inactive'}[isActive]"></div>option?3: function?Ctr($scope)?{?}<div?ng-class?=?"{option.selected?==?'active'???'active'?:?'inactive'}"></div>

也可以用angular.element (jqLite)來實現此功能：

var?ele?=?document.getElementById(scope.subPhaseId); angular.element(ele).addClass('active');

angular.element接受String參數或DOM元素。也可直接用.css("k:v")綁定css style。

轉載于:https://my.oschina.net/u/2274721/blog/408410

總結

以上是生活随笔為你收集整理的angularjs directive 的几点使用技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。