반응형
angular.js는 어떻게 내부 HTML을 재평가/재컴파일합니까?
내부 html을 수정하는 지시문을 만들고 있습니다.지금까지의 코드:
.directive('autotranslate', function($interpolate) {
return function(scope, element, attr) {
var html = element.html();
debugger;
html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) {
return '<span translate="' + text + '"></span>';
});
element.html(html);
}
})
내부 html이 각도로 평가되지 않는 것을 제외하고 동작합니다.의 재평가를 트리거하고 싶다.element
의 서브트리입니다.그렇게 할 수 있는 방법이 있나요?
감사합니다:)
해야 한다$compile
내면의 html과 같은
.directive('autotranslate', function($interpolate, $compile) {
return function(scope, element, attr) {
var html = element.html();
debugger;
html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) {
return '<span translate="' + text + '"></span>';
});
element.html(html);
$compile(element.contents())(scope); //<---- recompilation
}
})
이 문제를 해결하기 위해 제가 개발한 보다 일반적인 방법은 다음과 같습니다.
angular.module('kcd.directives').directive('kcdRecompile', function($compile, $parse) {
'use strict';
return {
scope: true, // required to be able to clear watchers safely
compile: function(el) {
var template = getElementAsHtml(el);
return function link(scope, $el, attrs) {
var stopWatching = scope.$parent.$watch(attrs.kcdRecompile, function(_new, _old) {
var useBoolean = attrs.hasOwnProperty('useBoolean');
if ((useBoolean && (!_new || _new === 'false')) || (!useBoolean && (!_new || _new === _old))) {
return;
}
// reset kcdRecompile to false if we're using a boolean
if (useBoolean) {
$parse(attrs.kcdRecompile).assign(scope.$parent, false);
}
// recompile
var newEl = $compile(template)(scope.$parent);
$el.replaceWith(newEl);
// Destroy old scope, reassign new scope.
stopWatching();
scope.$destroy();
});
};
}
};
function getElementAsHtml(el) {
return angular.element('<a></a>').append(el.clone()).html();
}
});
다음과 같이 사용합니다.
HTML
<div kcd-recompile="recompile.things" use-boolean>
<div ng-repeat="thing in ::things">
<img ng-src="{{::thing.getImage()}}">
<span>{{::thing.name}}</span>
</div>
</div>
자바스크립트
$scope.recompile = { things: false };
$scope.$on('things.changed', function() { // or some other notification mechanism that you need to recompile...
$scope.recompile.things = true;
});
편집
이 경우 웹 사이트의 버전이 더 최신일 가능성이 높기 때문에 꼭 보시기 바랍니다.
이것은 @Reza의 솔루션보다 더 잘 동작하는 것으로 판명되었습니다.
.directive('autotranslate', function() {
return {
compile: function(element, attrs) {
var html = element.html();
html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) {
return '<span translate="' + text + '"></span>';
});
element.html(html);
}
};
})
레자의 코드는scope
모든 자 요소의 범위입니다.단, 이 디렉티브의 서브노드 중 하나에 ng-controller 같은 것이 있는 경우 스코프 변수는 검출되지 않습니다.단, 이 솔루션 ^에서는, 그럭저럭 효과가 있습니다.
언급URL : https://stackoverflow.com/questions/21487617/how-do-i-make-angular-js-reevaluate-recompile-inner-html
반응형
'programing' 카테고리의 다른 글
스프링 요구 JSON을 생성 및 사용하는 컨트롤러의 매핑 (0) | 2023.03.06 |
---|---|
get_home_url()은 현재 URL만 반환합니다. (0) | 2023.03.06 |
Xcode 11.0 빌드 get 오류 - 메서드의 알 수 없는 인수 유형 '_attribute__' - [RCTAppState getCurrentAppState:error:] (0) | 2023.03.06 |
Open 생성 방법기존 Spring REST API의 API 3.0 YAML 파일? (0) | 2023.03.06 |
TypeScript TS7015: 인덱스 식이 '번호' 유형이 아니므로 요소에 암묵적으로 '임의' 유형이 있습니다. (0) | 2023.03.06 |