2013-05-22 3 views
5

템플릿/templateURL에 적용 할 수 있지만 현재 콘텐츠는 애플리케이션의 다른 위치에서로드됩니다.ajax 콘텐츠에 각도 js 지시문을 적용하는 방법은 무엇입니까?

JSbin : http://jsbin.com/imuseb/1/

HTML

<html ng-app="app"> 
    <head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 

    </head> 
    <body> 

    <div alert>here</div> 

    </body> 
</html> 

JS 코드 : 당신이 각 프레임 워크 내에서 추가 콘텐츠를로드 할 수 있다면 그것은 가장 좋은 것입니다

var app = angular.module('app', []); 

app.directive('alert', function(){ 
    return { 
    link: function (scope, element, attrs) { 
     element.on("click", function(){ 
     alert("here"); 
     }); 
    } 
    }; 
}); 


$(function(){ 
    $("body").append("<div alert>here too</div>"); 
}); 
+0

지금까지 시도한 것은 무엇입니까? 몇 가지 샘플 코드를 제공 할 수 있습니까? – tschiela

+0

몇 가지 코드가 추가되었습니다 ... –

답변

3

올바르게 컴파일하려면 각도 응용 프로그램에서 새 DOM에 액세스 할 수 있어야합니다. 이 작업을 수행하는 한 가지 방법이 있습니다 (유일한 방법은 아님). 응용 프로그램의 $rootScope에 새 DOM을 적용하는 경우,이 변경 :

$(function(){ 
    $("body").append("<div alert>here too</div>"); 
}); 

에 :

app.run(function($rootScope){ 
    $rootScope.$apply($("body").append("<div editable>here too</div>")); 
}); 

Angular docs에 따르면

$ 적용()에 사용된다 앵귤러 프레임 워크의 바깥 쪽에서 표현식을 실행하십시오. (예 : 브라우저 DOM 이벤트, setTimeout, XHR 또는 타사 라이브러리).

+3

Thanks sh0ber. $ compile ($ body "). append ("

here too
")) ($ scope); –

+0

'app.run()'문맥에서 $ apply와 $ compile을 사용하는 것의 차이점은 무엇입니까? 감사 – RPDeshaies

0

. ng-include을 확인하십시오.

필요한 것을 수행하는 데 사용할 수 없다면 요소에서 각도 컴파일 서비스를 수동으로 호출하여 컴파일하고 $compile을 사용하여 직접 범위에 링크해야합니다.

컴파일 요소는 DOM에 닿으므로 가능한 경우 사용자 지정 지시문 내에서 수행해야합니다.

관련 문제