집 >웹 프론트엔드 >HTML 튜토리얼 >AngleJS의 ng-bind-html 지시문에 대한 자세한 설명

AngleJS의 ng-bind-html 지시문에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-08 10:21:392141검색

이번에는 angularJS의 ng-bind-html 지시문에 대해 자세히 설명하고,angularJS의 ng-bind-html 지시문을 사용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 봐.

Angular js의 강력한 기능 중 하나는 양방향 데이터 바인딩 기능입니다. 우리가 자주 사용하는 두 가지는 양식에 대한 ng-bind와 ng-model입니다. 하지만 우리 프로젝트에서는 백그라운드에서 반환된 데이터에 다양한 html 태그가 포함되어 있는 상황에 직면하게 됩니다. 예:

$scope.text = “hello,<br><b> 这是一个例子</b>”

우리는 ng-bind-html과 같은 명령을 사용하여 바인딩하지만 결과는 우리가 원하는 것과 다릅니다. 이렇습니다:
안녕하세요, 이것은 예시입니다. (텍스트에 설정한 b 태그 스타일이 손실되었습니다.)

오랜 시간 동안 디버깅한 끝에 마침내 문제를 잠그고 해결했습니다. , 하지만 노력은 여전히 그만한 가치가 있습니다. 결국 이를 파악하려면 더 많은 코드를 배워야 합니다.

이유는 다음과 같습니다.

angularJS는 데이터 바인딩을 수행할 때 기본적으로 텍스트 형식으로 출력합니다. 즉, 데이터의 모든 HTML 태그가 이스케이프되지 않고 허용되므로 보안이 향상되어 주입 공격이 방지됩니다. HTML 태그에서. 그러나 우리의 애플리케이션 시나리오가 기사 세부 사항 페이지와 유사한 경우 데이터베이스에서 서식이 지정된 텍스트를 읽을 때 페이지에 정상적으로 표시될 수 없습니다. 다음과 같습니다:

$scope.htmlStr = &#39;<p style="color:red;font-size=18px;"></p>&#39;;

이때 문제를 해결하려면 $sce 서비스를 사용해야 합니다. 소위 sce는 "Strict Contextual Escaping"의 약어입니다. 중국어로 번역하면 "엄격한 컨텍스트 모드"를 의미하며, 이는 안전한 바인딩으로도 이해될 수 있습니다. 이 방법은 값을 권한에 의해 허용되고 "ng-bind-html"을 사용하여 안전하게 바인딩할 수 있는 값으로 변환합니다.
사용 방법을 살펴보겠습니다.

이를 filter로 캡슐화하면 언제든지 템플릿에서 호출할 수 있습니다.

//注册一个过滤器，挂载到任意一个angular.module下，如果自定义过滤器较多，可以提取出来一个公用的过滤器module
    .filter(&#39;to_trusted&#39;, [&#39;$sce&#39;, function ($sce) {        return function (text) {            return $sce.trustAsHtml(text);
        };
    }]);//然后在页面中这样使用<p ng-bind-html="article.text | to_trusted"></p>

$sce는 angleJS와 함께 제공되는 보안 처리 모듈이며 $sce.trustAsHtml( 입력) 방식이 편리합니다. 데이터 내용을 html 형식으로 파싱하여 반환합니다. ng-bind-html로 바인딩된 데이터에 이 필터를 추가하면 데이터가 로드될 때 html 태그를 자동으로 이스케이프할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!