각도에서의 DOM 조작 처리JS

각도에서의 DOM 조작 처리JS

jQuery, Angular를 사용하여 DOM 조작(새 HTML 추가)을 수행할 때JS는 새 HTML에서 변수를 자동으로 감지하여 값으로 대체하지 않습니다.예를 들어 다음과 같습니다.

$scope.showSummary = function($event){

    $($event.currentTarget).html("<div>{{row}}</div>");

};

이것은 간단한 예이지만, 요소에서 HTML을 변경한 후(이 함수는 에 의해 호출되었습니다)ng-click출력은 그대로입니다.{{row}}문맥/문맥에서 행이 무엇을 의미하는지 대신합니다.

주사를 놓으셔야 합니다.$compile(http://docs.angularjs.org/api/ng.$compile)을 사용하여 새로운 html에 대해 잘 알고 있습니다.

$compile('<div>{{row}}</div')($scope).appendTo($event.currentTarget);

다만, 컨트롤러로 DOM 조작을 실시하는 것은, 어느 정도 거부되고 있습니다.컨트롤러가 비즈니스를 처리하고 뷰가 뷰를 처리하기를 원합니다.

당신이 원하는 것을 하도록 지시해 보세요.http://docs.angularjs.org/guide/directive

새로운 요소(예: $("<" + "div>")에 fragment를 사용하는 경우, JQuery 프리펜드/추가 메서드에 다음과 같은 래퍼를 사용하면 요소 추가 코드를 변경할 필요가 없습니다.

// run angular-compile command on new content
// (also works for prependTo/appendTo, since they use these methods internally)
var oldPrepend = $.fn.prepend;
$.fn.prepend = function()
{
    var isFragment = arguments[0][0] && arguments[0][0].parentNode && arguments[0][0].parentNode.nodeName == "#document-fragment";
    var result = oldPrepend.apply(this, arguments);
    if (isFragment)
        AngularCompile(arguments[0]);
    return result;
};
var oldAppend = $.fn.append;
$.fn.append = function()
{
    var isFragment = arguments[0][0] && arguments[0][0].parentNode && arguments[0][0].parentNode.nodeName == "#document-fragment";
    var result = oldAppend.apply(this, arguments);
    if (isFragment)
        AngularCompile(arguments[0]);
    return result;
};

function AngularCompile(root)
{
    var injector = angular.element($('[ng-app]')[0]).injector();
    var $compile = injector.get('$compile');
    var $rootScope = injector.get('$rootScope');
    var result = $compile(root)($rootScope);
    $rootScope.$digest();
    return result;
}

언급URL : https://stackoverflow.com/questions/11699635/dealing-with-dom-manipulations-in-angularjs