jQuery의 .append()를 통해 DOM 요소(각도 지시어)를 추가하는 방법
다음과 같은 jQuery 메서드를 사용하여 Angular 지시어 요소를 추가할 수 있는 방법이 있습니까?append()Angular가 컴파일/링크를 실시하여 처음에 디렉티브를 포함시킨 것처럼 동작하도록 할 수 있습니까?
예:
app.directive('myAngularDirective', [function () {
...
// Lots of stuff in here; works when used normally but not when added via jQuery
});
$("body").append("<my-angular-directive />");
현재는 "my-angular-direction"이라고 불리는 빈 DOM 요소를 추가했을 뿐이지만, Angular는 기능을 발휘하지 않습니다.
올바른 방법은 $compile을 사용하고 지시문이 반환되는 경우:directive definition object(그것은 btw입니다).권장되는 방법)를 사용하여 전화할 수 있습니다.link(주입하다) 기능하다scope예를 들어)를 참조해 주세요.
$('body').append($compile("<my-angular-directive />")(scope));
scope.$apply();
Angular 문서의 완전한 예:
// Angular boilerplate
var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope) {
$scope.content = {
label: "hello, world!",
};
});
// Wrap the example in a timeout so it doesn't get executed when Angular
// is first started.
setTimeout(function() {
// The new element to be added
var $div = $("<div ng-controller='MyCtrl'>new: {{content.label}}</div>");
// The parent of the new element
var $target = $("[ng-app]");
angular.element($target).injector().invoke(function($compile) {
var $scope = angular.element($target).scope();
$target.append($compile($div)($scope));
// Finally, refresh the watch expressions in the new element
$scope.$apply();
});
}, 100);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">old: {{content.label}}</div>
</div>이상적으로 당신은 그것을 피해야 한다.
하지만, 만약 당신이 정말로 정말로, 정말로 필요하다면, 당신은 서비스를 주입하고 사용할 수 있습니다.element.append.
지시문에 특정 범위에 대한 액세스가 필요하지 않은 경우,$compile그리고.$rootScope에게 봉사하다.window에서run응용 프로그램 모듈의 기능을 만든 다음 새 모듈을 생성하여 각도 컨텍스트 외부에서 사용합니다.scope($rootScope.new()를 사용하여 요소의 첨부를 랩합니다.$rootScope.apply().
받아들여진 답변은 완전한 예를 제시하지 못했습니다.다음은 예를 제시하겠습니다.
https://codepen.io/rhinojosahdz/pen/ZpGLZG
<body ng-app="app" ng-controller="Ctrl1 as ctrl1">
</body>
<script>
angular.module('app',[])
.controller('Ctrl1', ['$scope', '$compile', function($scope, $compile){
var vm = this;
vm.x = 123;
$('body').append($compile("<hola x='ctrl1.x' />")($scope));
}])
.directive('hola', function(){
return {
template: '<div ng-click="vm.alertXFromGivenScope()">click me!</div>'
,scope: {
x : '='
}
,controller: function(){
var vm = this;
vm.alertXFromGivenScope = function(){
alert(vm.x);
};
}
,controllerAs: 'vm'
,bindToController: true
}
})
<script>
가능한 한 어떤 질문도 하고 싶지 않으시겠지만, 얼마 전에 비슷한 문제에 부딪혔는데, 여기 제 질문과 정답이 있습니다.간단한 답변은 $compile을 사용하는 것입니다.
이거 드셔보세요
angular.element($("#appendToDiv")).append($compile("<my-angular-directive />")($scope));
언급URL : https://stackoverflow.com/questions/20059231/how-to-add-dom-elements-angular-directives-via-jquerys-append
'source' 카테고리의 다른 글
| Android에서의 Best REST 클라이언트 프레임워크/유틸리티 (0) | 2023.03.15 |
|---|---|
| ngRepeat에서 선택한 행을 강조 표시하는 방법 (0) | 2023.03.15 |
| ng-options 바인딩된 선택 요소에 대해 선택한 값 설정 (0) | 2023.03.10 |
| Wordpress에서 액션 우선순위를 변경하려면 어떻게 해야 합니까? (0) | 2023.03.10 |
| 로컬 스토리지에 객체 어레이를 저장하는 방법 (0) | 2023.03.10 |