여기서는 AngularJS에서 $ attrs 메소드를 사용하는 예를 여러분과 공유하고 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title>
제목없는 문서
</제목>
<script src = "http : // localhost : 81/js/jquery.js">
</스크립트>
<script src = "http : // localhost : 81/js/angular.min.js">
</스크립트>
</head>
<body ng-app = "데모">
<div a>
a_directive
</div>
<div ng-controller = "testctrl">
<h1 t>
독창적 인 콘텐츠
</h1>
<h2 t2>
독창적 인 콘텐츠
</h2>
<h3 t3 = "hiphop"title2 = "{{name}}">
독창적 인 콘텐츠
</h3>
<div compile> </div>
<div>
<test a = "{{a}}"bc = "xxx"> </test>
<버튼 ng-click = "a = a+1">
개정하다
</버튼>
</div>
<te a = "1"ys-a = "123"ng-click = "show (1)"> here </te>
</div>
<cript>
var app = angular.module ( 'demo', [], angular.noop);
App.Controller ( "TestCtrl",
함수 ($ scope) {
$ scope.name = "Qihao";
});
app.directive ( "t",
기능() {
반품 {
컨트롤러 : 함수 ($ scope) {$ scope.name = "QQ"},
템플릿 : "<div> 테스트 :집니다.
교체 : true,
범위 : true // 범위가 상속되고 기본값이 상속됩니다
}
});
App.Directive ( "T2",
기능() {
반품 {
컨트롤러 : 함수 ($ scope) {$ scope.name = "nono"},
템플릿 : "<div> 테스트 :집니다.
교체 : true,
제한 : "ae"
}
});
App.Directive ( "T3",
기능() {
반품 {
템플릿 : "<div> 테스트 :집니다.
교체 : true,
제한 : "ae",
범위 : {
제목 : "@t3",
Title2 : "@title2"
}
}
});
app.directive ( 'a',
기능() {
var func = function () {
console.log ( 'compile');
return function () {
Console.log ( 'link');
}
}
var controller = function ($ scope, $ element, $ attrs, $ transclude) {
// $ transclude : 명령 태그의 사본입니다
Console.log ( '컨트롤러');
Console.log ($ scope);
Console.log ($ transclude);
// $ transclude 두 개의 매개 변수를 받아 들으면 복제 된 요소에서 작동 할 수 있습니다.
var node = $ transclude (function (clone_element, scope) {
$ element.append (clone_element);
$ element.append ( "<pan> spantag ___ </span>");
console.log (clone_element);
Console.log ( '-');
Console.log (범위);
});
Console.log (노드);
}
반품 {
컴파일 : func,
템플릿 : "<h1 ng-transclude> </h1>",
컨트롤러 : 컨트롤러,
TransClude : True,
제한 : 'ae'
}
});
app.directive ( 'compile', function () {
var func = function () {
Console.log ( '컴파일');
반품 {
pre : function () {
Console.log ( '링크 프리')
},
게시물 : function () {
Console.log ( '링크 게시물')
},
}
}
반품 {
제한 : "ae",
컴파일 : func
}
})
app.directive ( 'test', function () {
var func = function ($ element, $ attrs) {
Console.log ($ attrs);
$ attrs. $ Observe ( 'a', function (new_v) {
Console.log (new_v);
});
}
return {compile : func,
제한 : 'e'}
});
app.controller ( 'testctrl', function ($ scope) {
$ scope.a = 123;
});
app.directive ( 'te', function () {
var func = function ($ scope, $ element, $ attrs, $ ctrl) {
Console.log ($ ctrl)
//$attrs.$ 세트. 이 속성에 대해 B를 설정하고, 값은 oo, 그게 IT입니다.
$ attrs. $ set ( 'b', 'ooo');
$ attrs. $ set ( 'a-b', '11');
// 여전히이 두 번째 매개 변수 값을 이해하지 못합니다
$ attrs. $ set ( 'c-d', '11', true, 'c_d');
Console.log ($ attrs);
}
반품 {
컴파일 : function () {
반환 기능
},
제한 : 'e'
}
});
app.controller ( 'testctrl', function ($ scope) {
$ scope.show = function (v) {console.log (v);}
});
</스크립트>
</body>
</html>
이 기사의 전부입니다. AngularJS에서 $ attrs의 사용에 대한 새로운 이해를 가질 수 있기를 바랍니다. 이 기사를 좋아할 수 있기를 바랍니다.