각도 이외의 돔에 추가 할 때 각도 지시문을 렌더링하는 방법은 무엇입니까?

Question

각도 이외의 돔에 추가 할 때 각도 명령을 렌더링하는 방법은 무엇입니까?

나는 천천히 기존 코드베이스에 각도를 도입하는 중입니다. dom에 일련의 행이있는 테이블이 있습니다. 각 행은 지시에 의해 제어되는 회 전자 소자들을 포함

<tr> 
    <td>stuff</td> 
    <td><div spinner></div></td> 
<tr> 

joyableApp.directive('spinner', [function() { 
    return { 
    templateUrl: 'spinner.html', 
    } 
}]); 

? 지금 <div spinner> 페이지로드에 DOM에있을 때, 회 전자 지시자가 올바르게 작동하고 spinner.html 템플릿이 적절히 그 DIV 내부 렌더링 .

그러나이 페이지에는 테이블에 행을 추가하는 버튼이 있습니다. 있는 HTML이 /get_new_row_content에서 반환

$(“#new-row-button”).click(function(e) { 
    $.get(“/get_new_row_content”, function(data) { 
    $(“#table tbody”).append(data); 
    }); 
}); 

위에 표시된 거의 바로 HTML, 그리고 <div spinner>이 포함되어 그 버튼을 지배하는 쿼리입니다. Dom 검사는 회 전자 요소가 페이지에 추가되었는지 확인합니다. 그러나 spinner.html 템플릿이 렌더링되지 않습니다. 이 새로운 행이 추가되면 spinner 지시문이 트리거되지 않습니다.

이 jquery 코드는 컨트롤러, 서비스, 팩토리 또는 기타 다른 것들은 아닙니다.

그렇다면 각도 지정을 사용하여 새 행을 가져 오는 방법은 무엇입니까?

대답은 '행 추가'버튼을 포함하여 전체 페이지가 각도로 제어되도록하는 것으로 생각되지만 그럴 시간이 없습니다. 각도와 기존 코드 사이에 단기간의 다리가 필요합니다.

TLDR : 동적으로 페이지의 외곽에서 dom 요소를 트리거하는 각도 지시문을 얻으려면 어떻게해야합니까? 할

$(“#new-row-button”).click(function(e) { 
    $.get(“/get_new_row_content”, function(data) { 
    var $injector = angular.injector(['ng','any other needed modules']); 
    $injector.invoke(function($rootScope,$compile){ 
     $(“#table tbody”).append($compile(data)($rootScope)); 
    }); 
    }); 
}); 

Answer 1

당신은 당신의 페이지에 결과를 주입 한 후 $ 컴파일 서비스를 사용하고 있습니다.

<tr ng-repeat="rowData in allRowData"> 

그러면 버튼에 allRowData 배열에 새 데이터를 추가하는 클릭이 발생할 수 있습니다. 를 갱신 해, rowData에 표시하고 싶은 데이터를 표시합니다.

위의 내용은 사용하기에 적합한 각도를 구현하는 올바른 방법입니다. 그 충고를 무시하면 즉시 콘텐츠를 작성하고 추가 할 수 있습니다.

var elem = angular.element(jQuery(“#table tbody”)); 
elem.injector().invoke(function($compile){ 
    elem.append($compile(html)(elem.scope())); 
}) 

Answer 2

올바른 일이이 NG 반복을해야하는 것입니다 :