Angular의 지시문에서 지시문 추가JS
나는 그것이 선언된 요소에 더 많은 지시사항을 추가하는 것을 관리하는 지시문을 작성하려고 한다.예를 들어, 추가에 대한 지침을 작성하고 싶습니다.datepicker
,datepicker-language
★★★★★★★★★★★★★★★★★」ng-required="true"
.
, 「」를 사용했을 .$compile
무한 루프를 생성하고 있기 때문에 필요한 Atribut이 이미 추가되어 있는지 확인합니다.
angular.module('app')
.directive('superDirective', function ($compile, $injector) {
return {
restrict: 'A',
replace: true,
link: function compile(scope, element, attrs) {
if (element.attr('datepicker')) { // check
return;
}
element.attr('datepicker', 'someValue');
element.attr('datepicker-language', 'en');
// some more
$compile(element)(scope);
}
};
});
그렇지 $compile
요소는 Atribut은 설정되지만 디렉티브는 부트스트랩되지 않습니다.
이 접근법이 올바른가요, 아니면 제가 잘못하고 있나요?같은 행동을 할 수 있는 더 좋은 방법이 있을까요?
UDPATE: 다음과 같은 사실을 고려하면$compile
이를 실현하는 유일한 방법은 첫 번째 컴파일 패스를 건너뛸 수 있는 방법이 있습니까(요소에 여러 개의 자녀가 포함될 수 있음).terminal:true
UPDATE 2: 이 명령어를 다음과 같이 입력해 보았습니다.select
이 두 번 즉, 컴파일이 두 된다는 뜻입니다.option
s.
에 복수의 가 있어,그중요한 는, 1개의 DOM 을 할 수 .priority
신청서 제출을 지시합니다.수치가 클수록 먼저 실행됩니다.기본 우선 순위는 지정하지 않을 경우 0입니다.
편집: 논의 후에, 완전한 실전 솔루션을 소개합니다.중요한 것은 Atribute를 삭제하는 것입니다.element.removeAttr("common-things");
및 , 「」도 있습니다.element.removeAttr("data-common-things");
한 경우)data-common-things
(html로)
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true, //this setting is important, see explanation below
priority: 1000, //this setting is important, see explanation below
compile: function compile(element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
}
};
}
};
});
현용 플런커는 http://plnkr.co/edit/Q13bUt?p=preview에서 구할 수 있습니다.
또는 다음 중 하나를 선택합니다.
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true,
priority: 1000,
link: function link(scope,element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
$compile(element)(scope);
}
};
});
""를 해야 하는가에 설명terminal: true
★★★★★★★★★★★★★★★★★」priority: 1000
수 (큰 수) :
가 되면, 는 를 , 된 모든 해, DOM 의 「Angular」 에 근거해 를 1 컴파일 .priority
이 지시들이 같은 요소 위에 있는 경우.커스텀 디렉티브의 priority를 높은 수치로 설정해, 커스텀 디렉티브가 최초로 컴파일 되어,terminal: true
다른 디렉티브는 이 디렉티브가 컴파일된 후에 건너뜁니다.
커스텀 디렉티브가 컴파일되면 디렉티브를 추가하고 삭제함으로써 요소를 수정하고 $compile 서비스를 사용하여 모든 디렉티브(스킵된 디렉티브 포함)를 컴파일합니다.
를 설정하지 않으면,terminal:true
★★★★★★★★★★★★★★★★★」priority: 1000
커스텀 디렉티브 전에 몇 가지 디렉티브가 컴파일 될 가능성이 있습니다.또한 커스텀 디렉티브가 $120을 사용하여 요소 =>을 컴파일하면 이미 컴파일된 디렉티브가 다시 컴파일 됩니다.이 경우 특히 커스텀 디렉티브 이전에 컴파일된 디렉티브가 이미 DOM을 변환한 경우에는 예측할 수 없는 동작이 발생합니다.
priority와 terminal에 대한 자세한 내용은 디렉티브의 terminal을 이해하는 방법을 참조하십시오.
로는 '지시하다'가 있습니다.ng-repeat
= (priority = 1000), adda가 아닌 경우ng-repeat
되어 있습니다.ng-repeat
다른 지시문이 적용되기 전에 템플릿 요소의 복사본을 만듭니다.
@Izhaki씨의 코멘트 덕분에, 이하에 대한 레퍼런스가 있습니다.ngRepeat
소스 코드: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js
간단한 템플릿 태그만으로 이 모든 것을 처리할 수 있습니다.예에 대해서는, http://jsfiddle.net/m4ve9/ 를 참조해 주세요.초지향적 정의에서는 실제로 컴파일 또는 링크 속성이 필요하지 않았습니다.
컴파일 프로세스 중에 Angular는 컴파일 전에 템플릿 값을 끌어오기 때문에 추가 지시사항을 첨부할 수 있으며 Angular가 대신 처리합니다.
컨텐츠를 가 있는 는, 「」를 사용할 수 .transclude : true
을 부부교교 the the the the the the the the the the and로 .<ng-transclude></ng-transclude>
도움이 되었으면 좋겠는데, 궁금한 점이 있으면 알려주세요.
알렉스야.
이 솔루션에서는 동적으로 추가할 필요가 있는 지시사항을 뷰로 이동하고 옵션(기본) 조건부 로직도 추가할 수 있습니다.이것에 의해, 하드 코드 로직 없이 디렉티브를 깔끔하게 유지할 수 있습니다.
디렉티브는 오브젝트의 배열을 취합니다.각 오브젝트에는 추가할 디렉티브의 이름과 전달되는 값(있는 경우)이 포함됩니다.
이러한 명령어의 사용 사례를 검토하는 데 어려움을 겪다가 특정 조건에 따라 명령어를 추가하는 조건부 로직을 추가하는 것이 유용할 수 있다는 생각이 들었습니다(아래 답변은 아직 계획되어 있습니다).인 ★★★★★★★★★★★★★를 추가했습니다.if
명령을 추가할지 여부를 결정하는 bool 값, 표현식 또는 함수(예를 들어 컨트롤러에 정의됨)를 포함해야 하는 속성.
저도 쓰고 있어요.attrs.$attr.dynamicDirectives
한 어트리뷰트 (예를 들면, 다음의 에 따릅니다data-dynamic-directive
,dynamic-directive
이치노
angular.module('plunker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function($scope) {
$scope.dt = function() {
return new Date();
};
$scope.selects = [1, 2, 3, 4];
$scope.el = 2;
// For use with our dynamic-directive
$scope.selectIsRequired = true;
$scope.addTooltip = function() {
return true;
};
}
])
.directive('dynamicDirectives', ['$compile',
function($compile) {
var addDirectiveToElement = function(scope, element, dir) {
var propName;
if (dir.if) {
propName = Object.keys(dir)[1];
var addDirective = scope.$eval(dir.if);
if (addDirective) {
element.attr(propName, dir[propName]);
}
} else { // No condition, just add directive
propName = Object.keys(dir)[0];
element.attr(propName, dir[propName]);
}
};
var linker = function(scope, element, attrs) {
var directives = scope.$eval(attrs.dynamicDirectives);
if (!directives || !angular.isArray(directives)) {
return $compile(element)(scope);
}
// Add all directives in the array
angular.forEach(directives, function(dir){
addDirectiveToElement(scope, element, dir);
});
// Remove attribute used to add this directive
element.removeAttr(attrs.$attr.dynamicDirectives);
// Compile element to run other directives
$compile(element)(scope);
};
return {
priority: 1001, // Run before other directives e.g. ng-repeat
terminal: true, // Stop other directives running
link: linker
};
}
]);
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div data-ng-controller="DatepickerDemoCtrl">
<select data-ng-options="s for s in selects" data-ng-model="el"
data-dynamic-directives="[
{ 'if' : 'selectIsRequired', 'ng-required' : '{{selectIsRequired}}' },
{ 'tooltip-placement' : 'bottom' },
{ 'if' : 'addTooltip()', 'tooltip' : '{{ dt() }}' }
]">
<option value=""></option>
</select>
</div>
</body>
</html>
받아들여진 솔루션이 나에게 그다지 효과가 없었기 때문에 나는 나의 솔루션을 추가하고 싶었다.
지시문을 추가하고 내 지시문도 요소에 남겨야 했어.
이 예에서는 요소에 단순한 ng 스타일 디렉티브를 추가합니다.무한 컴파일 루프를 방지하고 디렉티브를 유지할 수 있도록 요소를 다시 컴파일하기 전에 추가한 내용이 있는지 체크했습니다.
angular.module('some.directive', [])
.directive('someDirective', ['$compile',function($compile){
return {
priority: 1001,
controller: ['$scope', '$element', '$attrs', '$transclude' ,function($scope, $element, $attrs, $transclude) {
// controller code here
}],
compile: function(element, attributes){
var compile = false;
//check to see if the target directive was already added
if(!element.attr('ng-style')){
//add the target directive
element.attr('ng-style', "{'width':'200px'}");
compile = true;
}
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
if(compile){
$compile(iElement)(scope);
}
}
};
}
};
}]);
를 요소 . 예를 , 를 저장해 보십시오.superDirectiveStatus="true"
예를 들어 다음과 같습니다.
angular.module('app')
.directive('superDirective', function ($compile, $injector) {
return {
restrict: 'A',
replace: true,
link: function compile(scope, element, attrs) {
if (element.attr('datepicker')) { // check
return;
}
var status = element.attr('superDirectiveStatus');
if( status !== "true" ){
element.attr('datepicker', 'someValue');
element.attr('datepicker-language', 'en');
// some more
element.attr('superDirectiveStatus','true');
$compile(element)(scope);
}
}
};
});
도움이 됐으면 좋겠네요.
1.3.x에서 1.4.x로 변경되었습니다.
Angular 1.3.x에서는 다음과 같이 동작했습니다.
var dir: ng.IDirective = {
restrict: "A",
require: ["select", "ngModel"],
compile: compile,
};
function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
tElement.append("<option value=''>--- Kein ---</option>");
return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {
attributes["ngOptions"] = "a.ID as a.Bezeichnung for a in akademischetitel";
scope.akademischetitel = AkademischerTitel.query();
}
}
이제 Angular 1.4.x에서는 다음을 수행해야 합니다.
var dir: ng.IDirective = {
restrict: "A",
compile: compile,
terminal: true,
priority: 10,
};
function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
tElement.append("<option value=''>--- Kein ---</option>");
tElement.removeAttr("tq-akademischer-titel-select");
tElement.attr("ng-options", "a.ID as a.Bezeichnung for a in akademischetitel");
return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {
$compile(element)(scope);
scope.akademischetitel = AkademischerTitel.query();
}
}
(승인된 답변부터 : Khanh TO의 https://stackoverflow.com/a/19228302/605586).
경우에 따라서는 동작할 수 있는 간단한 해결책은 래퍼를 만들고 $컴파일한 후 원래 요소를 래퍼에 추가하는 것입니다.
뭐랄까...
link: function(scope, elem, attr){
var wrapper = angular.element('<div tooltip></div>');
elem.before(wrapper);
$compile(wrapper)(scope);
wrapper.append(elem);
}
이 솔루션은 원래 요소를 다시 컴파일하지 않고 단순하게 유지할 수 있다는 장점이 있습니다.
중 require
원본 요소의 지시사항 중 하나 또는 원본 요소가 절대적인 위치를 가지고 있는지 여부.
언급URL : https://stackoverflow.com/questions/19224028/add-directives-from-directive-in-angularjs
'programing' 카테고리의 다른 글
JSON 시리얼화 불가 (0) | 2023.03.25 |
---|---|
Mongoose 한계/오프셋 및 카운트 쿼리 (0) | 2023.03.25 |
angular-ui 부트스트랩(올바른 angular 방식으로 처리)을 갖춘 응답성 드롭다운형 내비게이션 바 (0) | 2023.03.25 |
CSS 배경 이미지가 모바일로 표시되지 않음 (0) | 2023.03.25 |
PLS-00103: "CREATE" 기호가 발견되었습니다. (0) | 2023.03.25 |