AngularJS에서 Sanitizing 스크립트

Question

AngularJS에서 $ sce를 사용하여 스크립트를 삭제하려고했습니다.

// 컨트롤러

angular.module('App') 
.controller('SketchCtrl', function ($scope, $location, $sce , http) { 
    $scope.init = function() { 
     var sketchId = $location.path().split("/:").pop(); 
     http.getSketch(sketchId); 
    } 
    $scope.sanitize = function (script) { 
     if(script){ 
      return $sce.trustAsJs(script); 
     } 
    } 
}); 

//보기

<script ng-bind="sanitize('{Here is a script I want to sanitize}}')"></script> 

하지만이 같은 오류가 발생했습니다.

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! 

나는 html을 위생 처리하는 방법을 알고 있지만 스크립트를 위생적으로 만들 생각이 있습니까?

Answer 1

일반적으로 언급 한 오류는 속성에 대한 변경 내용 루프를 만들 때 발생합니다. 예를 들어, 특정 속성의 변경 사항을 확인한 다음 해당 속성의 값을 수신기에서 변경하는 경우와 같습니다. 렌더링하는 동안 객체/모델을 변경하면 안됩니다. 그렇지 않으면 새로운 렌더링이 적용됩니다.

Answer 2

기존 답변에 추가하려면, 단순화 된

, $sce.trustAsJs 가능성이 가장 높은 발현을 재평가 ng-bind 원인이 무엇인가가 변경되었을 수 있습니다 AngularJS와의 $rootScope이, 표현이 sanitize를 호출 통지하고이 이상 발생 원인 $sce.trustAsJs를 호출하고 무언가가 잘못되어 가고 있기 때문에 한도에 도달 할 때까지 멈 춥니 다.

일반적으로 함수 호출을 HTML 바인딩에 넣지 않는 한 실제로는 간단한 작업 만 수행하면됩니다. 실행중인 것을 피할 수있는 방법은 ng-bind이며 범위 다이제스트 체인 외부에서만 업데이트하는 변수입니다.

예를 들어 여기에서 할 수있는 것은 ng-init입니다.이 변수는 변수를 설정하기 위해 한 번만 실행되며, ng-bind을 참조합니다.

<script ng-init="script = sanitize('{Here is a script I want to sanitize}}')" 
     ng-bind="script"></script> 

은 또한 단지 script가 변경되거나 초기화 될 때마다 만 sanitize 전화 확인, 컨트롤러에서 위의 예에서 script을 설정할 수 있습니다.

당신이 원하는 임의의 JS를 신뢰한다면 간단하게 유지하고 eval을 사용할 수도 있습니다.