각도 동적으로 HTML 파일을 생성

Question

각 페이지의 내용이 데이터베이스에 저장되는 간단한 CMS 시스템을 작성하려고합니다. 사용자가 데이터베이스에서 해당 페이지의 콘텐츠를 검색하여 즉시 abc.html 생성하는 각 라우팅 및 컨트롤러를 통해

/pages/abc.html

에 액세스하려고합니다. 나는 하나의 방법은 페이지를 반환하는 templateUrl에 기능을 추가하는 것입니다 발견

.when('/content/pages/:name*', { 
    templateUrl: function(parameters) { 
     return '/pages/' + parameters.name + '.html'; 
    }, 
    controller: 'ContentCtrl', 
    controllerAs: 'content' 
    }) 

문제가 내가 abc.html이 필요하다 그러나

이미 존재하고 DOM 컨텐츠를 컴파일하고 연결하는 컨트롤러. 내가하려고하는 일은 abc.html을 이미 존재하는 것이 아니라 비행 중에 생성하는 것입니다. 이렇게하면 내 사용자가 xyz 콘텐츠를 추가하도록 허용 할 수 있으며 xyz.html 템플리트 html upfront를 만들지 않고도 xyz.html에 액세스하려고하면 거기에있게됩니다. 이를 달성하기 위해 사용할 수있는 방법이 있습니까?

Answer 1

parameters.name html 파일을 생성해야하는 이유가 있습니까? html을 컨트롤러에 전달할 때 템플릿을 정의 할 수 있다고 생각합니다. 반복되는 로직이 많으면 컨텐츠 구성 요소 나 지시문을 만들 수 있습니다.

Answer 2

내가 한 것은 사용자 지정 지시문을 작성하는 것입니다. 지시문에 UI 요소에 해당하는 객체가 포함 된 배열을 전달합니다. 객체는 JS에 정의되어 있으며 모두 객체 속성을 기반으로 HTML을 생성하는 .html() 함수를 가지고 있습니다. 그런 다음 구조를 저장/복원하려면 JSON.string 개체를 DB 및 JSON.parse에 삽입하여 개체를 다시 가져올 수 있습니다 ... 까다로운 부분은 개체의 속성으로 데이터 형식을 저장해야합니다. 그래서 당신은 올바른 유형을 선택할 수 있습니다.

지시문 자체는 각 객체에서 html() 함수를 호출하고 출력을 연결 한 다음 요소의 innerHTML을 설정합니다.

Answer 3

나는 내가 원하는 html을 삽입하기 위해 템플릿 속성을 사용할 수 있음을 깨달았다.

.when('/content/pages/:name*', { 
    template: function(parameters) { 
     return 'hello' + parameters.name; 
    }, 
    controller: 'ContentCtrl', 
    controllerAs: 'content' 
    }) 

Answer 4

당신은 컨트롤러에 매개 변수로 템플릿 이름을 전달 할 수있는 일 : (존재하지 않는 경우)

.when('/content/pages/:name*', { 
    templateUrl: function(parameters) { 
     return '/pages/:templateName'; 
    }, 
    controller: 'ContentCtrl', 
    controllerAs: 'content' 
    }) 

그리고 컨트롤러

이 필요한 HTML을 생성하고 템플릿의 HTML을 포함 ng-include :

<div ng-include="template.url" ng-if="template.url"></div>