IT story

파일에서 AngularJs의 변수로 HTML 템플릿로드

hot-time 2021. 1. 5. 19:13
반응형

파일에서 AngularJs의 변수로 HTML 템플릿로드


HTML을 리치 텍스트 편집기에 바인딩해야하는 양식으로 작업하고 있습니다. 이 HTML 콘텐츠를 저장하는 가장 좋은 방법은 HTML 파일입니다.

파일에서 HTML 템플릿을로드하고 변수에 할당하는 방법을 알 수 없습니다.

지시문은 templateUrl로 작업 할 때 이것을 할 수있는 것 같습니다. 컨트롤러 내부에서 동일한 작업을 수행하기 위해 각도에 저수준 API가 있는지 궁금합니다.


모든 템플릿은 캐시에로드됩니다. 템플릿에 액세스하는 데 사용할 수 있는 주입 가능한 $ templateCache 서비스가 있습니다.

app.controller('testCtrl', function($scope, $templateCache){
    var template = $templateCache.get('nameOfTemplate.html');
});

를 사용하면 $templateRequestHTML 페이지에 포함하지 않고도 URL별로 템플릿을로드 할 수 있습니다. 템플릿이 이미로드 된 경우 캐시에서 가져옵니다.

app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
    // Make sure that no bad URLs are fetched. You can omit this if your template URL is
    // not dynamic.
    var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');

    $templateRequest(templateUrl).then(function(template) {
        // template is the HTML template as a string

        // Let's put it into an HTML element and parse any directives and expressions
        // in the code. (Note: This is just an example, modifying the DOM from within
        // a controller is considered bad style.)
        $compile($("#my-element").html(template).contents())($scope);
    }, function() {
        // An error has occurred
    });
});

이것은 수동으로 수행하는 방법이지만 대부분의 경우 선호되는 방법은 속성을 사용하여 템플릿을 가져 오는 지시문정의 하는 입니다.templateUrl

참조 URL : https://stackoverflow.com/questions/24496201/load-html-template-from-file-into-a-variable-in-angularjs

반응형