[JQUERY] AngularJS와 + JQuery와 어떻게 AngularJS와에서 작업 동적 콘텐츠를 얻을 수 있습니다

AngularJS와 + JQuery와 어떻게 AngularJS와에서 작업 동적 콘텐츠를 얻을 수 있습니다

해결법

1. ---

   1.당신은 각 바인딩을 수행 할 수있는 기회를 얻을 수 있도록 DOM에 삽입하기 전에 HTML 문자열에 $ 컴파일을 호출해야합니다.

   당신은 각 바인딩을 수행 할 수있는 기회를 얻을 수 있도록 DOM에 삽입하기 전에 HTML 문자열에 $ 컴파일을 호출해야합니다.

   당신의 바이올린, 그것은 다음과 같이 보일 것입니다.

   $("#dynamicContent").html(
     $compile(
       "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
     )(scope)
   );
   

   분명히, $ 컴파일은이 작업을 수행하려면 컨트롤러에 주입해야합니다.

   은 $ 컴파일 설명서에 자세히보기.

2. ---

   2.케이스 당신 마십시오하지 않은 제어 이상의 동적 내용의 또 다른 해결 방법

   케이스 당신 마십시오하지 않은 제어 이상의 동적 내용의 또 다른 해결 방법

   당신이 지시를 통해 요소를로드하지 않은 경우이 작업 (예. 주석 jsfiddles의 예처럼).

   콘텐츠를 감싸

   당신이 jQuery를 사용하는 경우 당신이 그것을 선택할 수 있도록 사업부에서 콘텐츠를 감 쌉니다. 당신은 또한 당신의 요소를 얻기 위해 기본 자바 스크립트를 사용하도록 선택할.

   <div class="selector">
       <grid-filter columnname="LastNameFirstName" gridname="HomeGrid"></grid-filter>
   </div>
   

   사용 각도 인젝터

   계정이없는 경우 $ 컴파일에 대한 참조를 얻기 위해 다음 코드를 사용할 수 있습니다.

   $(".selector").each(function () {
       var content = $(this);
       angular.element(document).injector().invoke(function($compile) {
           var scope = angular.element(content).scope();
           $compile(content)(scope);
       });
   });
   

   요약

   원래 포스트는 편리 달러 (A $) 컴파일 참조를 가지고 생각하는 것 같았다. 당신이 참조가 때 쉽게 분명하지만,이 나에게 대답했다, 그래서 나는하지 않았다.

   이전 코드의 한 가지주의

   당신이 작게하다 시나리오와 asp.net/mvc 번들을 사용하는 경우 릴리스 모드에서 배포 할 때 문제가 드릴 것입니다. 각 자바 스크립트 코드로 minifier의 간섭이 발생합니다 : [unpr $ 인젝터 :] 문제는 처리되지 않는 오류의 형태로 제공됩니다.

   여기를 해결하는 방법은 다음과 같습니다

   다음 과부하로 이전 코드를 교체합니다.

   ...
   angular.element(document).injector().invoke(
   [
       "$compile", function($compile) {
           var scope = angular.element(content).scope();
           $compile(content)(scope);
       }
   ]);
   ...
   

   나는 그것을 함께 재현하기 전에이 나에게 슬픔을 많이 발생합니다.

3. ---

   3.@의 jwize의 대답에 추가

   @의 jwize의 대답에 추가

   angular.element (문서) .injector ()는 오류 인젝터를 제공했기 때문에 정의되지 않은 그래서, DOM이 jQuery를 사용하여 변경 될 때 당신이 AJAX 호출 후에 실행하거나 할 수있는 기능을 만들었습니다.

     function compileAngularElement( elSelector) {
   
           var elSelector = (typeof elSelector == 'string') ? elSelector : null ;  
               // The new element to be added
           if (elSelector != null ) {
               var $div = $( elSelector );
   
                   // The parent of the new element
                   var $target = $("[ng-app]");
   
                 angular.element($target).injector().invoke(['$compile', function ($compile) {
                           var $scope = angular.element($target).scope();
                           $compile($div)($scope);
                           // Finally, refresh the watch expressions in the new element
                           $scope.$apply();
                       }]);
               }
   
           }
   

   단지 새로운 요소의 선택을 전달하여 그것을 사용할 수 있습니다. 이 같은

   compileAngularElement( '.user' ) ; 
   

from https://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs by cc-by-sa and MIT license