angularjsdirective의 몇 가지 사용 기교
1501 단어 AngularJS
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 명령을 사용하여 논리적 조건을 판단하여 동적으로 cssclass를 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>
앵글로도 쓸 수 있어요.element(jqLite) 기능:
var ele = document.getElementById(scope.subPhaseId);
angular.element(ele).addClass('active');
angular.element는 String 매개변수 또는 DOM 요소를 수용합니다.그냥 써도 돼요.css ("k:v") 귀속 css 스타일.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
AngularJS의 ng-options best practise쓸데없는 말은 하지 말고 바로 코드를 찍어라. 리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다 angular에서 생성된 의value가 무엇인지, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.