HTML을 동적으로 바인딩하는 방법-HTML 튜토리얼-php.cn

HTML을 동적으로 바인딩하는 방법

高洛峰

풀어 주다： 2017-03-08 15:49:53

원래의

1261명이 탐색했습니다.

웹 프런트엔드 개발에서는 백엔드 또는 동적 접합에서 페이지 DOM 표시로 일부 HTML 문자열을 동적으로 바인딩해야 하는 경우가 종종 있습니다. 특히 콘텐츠 관리 시스템(CMS: Content Management System) 약어에서 이러한 요구 사항은 더욱 그렇습니다. 어디에나 있습니다.

Angular에서는 기본값은 추가된 HTML을 신뢰하지 않는 것입니다. 추가된 HTML 콘텐츠는 먼저 $sce.trustAsHtml을 사용하여 이것이 신뢰할 수 있는 HTML 콘텐츠임을 Angular에 알려야 합니다. 그렇지 않으면 $sce:unsafe 예외 오류가 발생합니다.

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

로그인 후 복사

다음은 간단한 각도 링크를 바인딩하는 데모입니다.

HTML:

<div ng-controller="DemoCtrl as demo">
    <div ng-bind-html="demo.html"></div>
</div>

로그인 후 복사

JavaScript:

angular.module("com.ngbook.demo", [])
    .controller("DemoCtrl", ["$sce", function($sce) {
        var vm = this;

        var html = &#39;<p>hello <a href="https://angular.io/">angular</a></p>&#39;;
        vm.html = $sce.trustAsHtml(html);

        return vm;
    }]);

로그인 후 복사

간단한 정적 HTML의 경우 이 문제는 해결되었습니다. 그러나 복잡한 HTML의 경우 복잡성은 각도 표현식과 지침이 포함된 HTML 템플릿을 의미합니다. 이를 위해 우리는 대규모 DOM 디스플레이를 바인딩할 뿐만 아니라 각도의 강력한 양방향 바인딩 메커니즘도 얻기를 희망합니다. ngBindHhtml은 양방향 바인딩을 위해 $scope와 연결되지 않습니다. HTML에 ngClick, ngHref, ngSHow, ngHide 및 기타 각도 명령이 있는 경우 이러한 버튼을 클릭해도 바인딩 표현이 발생하지 않습니다. 수식은 업데이트되지 않습니다. 예를 들어, 마지막 링크를 ng-href="demo.link"로 변경하려고 하면 링크가 구문 분석되지 않고 원래 HTML 문자열이 DOM에 계속 표시됩니다.

적용하려면 각도의 모든 명령이 컴파일을 거쳐야 합니다. 컴파일에는 사전 링크와 사후 링크가 포함되어 있으며 작동하기 전에 특정 동작에 연결됩니다. 대부분의 경우 컴파일은 각도가 시작될 때 자동으로 컴파일됩니다. 하지만 동적으로 추가된 템플릿이라면 수동으로 컴파일해야 합니다. Angular는 이 기능을 구현하기 위해 $compile 서비스를 제공합니다. 다음은 보다 일반적인 컴파일 예입니다.

HTML:

<body ng-controller="DemoCtrl as demo">
    <dy-compile html="{{demo.html}}">
    </dy-compile>
    <button ng-click="demo.change();">change</button>
</body>

로그인 후 복사

JavaScript:

angular.module("com.ngbook.demo", [])
    .directive("dyCompile", ["$compile", function($compile) {
        return {
            replace: true,
            restrict: &#39;EA&#39;,
            link: function(scope, elm, iAttrs) {
                var DUMMY_SCOPE = {
                        $destroy: angular.noop
                    },
                    root = elm,
                    childScope,
                    destroyChildScope = function() {
                        (childScope || DUMMY_SCOPE).$destroy();
                    };

                iAttrs.$observe("html", function(html) {
                    if (html) {
                        destroyChildScope();
                        childScope = scope.$new(false);
                        var content = $compile(html)(childScope);
                        root.replaceWith(content);
                        root = content;
                    }

                    scope.$on("$destroy", destroyChildScope);
                });
            }
        };
    }])
    .controller("DemoCtrl", [function() {
        var vm = this;

        vm.html = &#39;<h2>hello : <a ng-href="{{demo.link}}">angular</a></h2>&#39;;

        vm.link = &#39;https://angular.io/&#39;;
        var i = 0;
        vm.change = function() {
            vm.html = &#39;<h3>change after : <a ng-href="{{demo.link}}">&#39; + (++i) + &#39;</a></h3>&#39;;
        };
    }]);

로그인 후 복사

여기서 dy-compile이라는 지시문이 생성되며, 먼저 바인딩 변경 사항을 수신합니다. html 속성 값에 html 콘텐츠가 존재하면 먼저 하위 범위를 생성한 다음 $compile 서비스를 사용하여 수신 html을 동적으로 연결하고 여기에서 하위 범위를 생성하는 이유를 대체합니다. DOM이 파괴될 때마다 쉽게 범위를 파괴하는 것이 편리하며, HTML 컴파일에서 가져온 감시자 기능을 제거하고, 마지막 상위 범위가 파괴되면 범위도 파괴하려고 시도합니다.

위의 컴파일 컴파일 및 연결로 인해 ngHref 명령이 적용될 수 있습니다. 다음은 동적 컴파일 각도 모듈의 예를 제공하려는 시도일 뿐입니다. 특정 구현 방법에 대해서는 비즈니스에 문의하여 특정 지시문을 선언하세요.

위 내용은 HTML을 동적으로 바인딩하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!