누구든지이 코드에서 무슨 일이 일어나고 있는지 설명 할 수 있습니까? 나는 link함수가 이후에 실행 된다는 것을 이해합니다 compile.
link vs compile.js is :
var app = angular.module('myApp', []);
app.directive('highlight', function () {
return {
restrict: 'A',
compile: function ($element, $attr, $transclude) {
console.log('executed highlight');
$element.addClass("highlight");
//$element.addClass("red");
}
};
});
app.directive('red', function () {
return {
restrict: 'A',
link: function ($scope, $element, $attr) {
console.log('executed red');
$element.addClass("red");
//$element.addClass("highlight");
}
};
});
link vs compile.html is :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/link vs compile.js" type="text/javascript"></script>
<style type="text/css">
.highlight{
background:yellow;
}
.red{
background: red;
}
</style>
</head>
<body>
<div ng-repeat="word in ['abc','def','ghi']" red highlight >
{{word}}
</div>
</body>
</html>
위의 결과는 나중에 실행 된 div것처럼 의미가있는 빨간색 배경색으로 나타나 link므로 효과 compile함수를 덮어 썼을 수 있습니다 . 그러나이 link vs compile.js형식으로 변경 하면 :
var app = angular.module('myApp', []);
app.directive('highlight', function () {
return {
restrict: 'A',
compile: function ($element, $attr, $transclude) {
console.log('executed highlight');
//$element.addClass("highlight");
$element.addClass("red");
}
};
});
app.directive('red', function () {
return {
restrict: 'A',
link: function ($scope, $element, $attr) {
console.log('executed red');
//$element.addClass("red");
$element.addClass("highlight");
}
};
});
지금 div은 red배경입니다. 그 이유는 무엇입니까? 경우 link함수는해야하지 나중에 실행 된 div이 yellow색상을?
이는 없다 AngularJS와에 대해 아무것도 link 또는 compile이 약이다, css같은
<div class="highlight red">my div</div>
수업 순서를 변경해도 아무 일도 일어나지 않습니다.
<div class="red highlight">my div</div>
자세한 내용 : CSS 클래스의 순서를 지정하는 방법은 무엇입니까?
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다