데이터베이스의 인라인 코드 사용

내 응용 프로그램의 일부로 HTML 편집기 (Content Tools)를 통해 정보의 단일 페이지를 편집하는 사용자가 있습니다. 필자는 편집중인 페이지가 하드 코딩 된 것이 아닌 동적 템플릿으로 구성되도록 해당 기능 코드를 수정하기 시작했습니다.데이터베이스의 인라인 코드 사용

현재 편집/편집 가능한 데이터를 데이터베이스 테이블에 저장하고 있습니다. 나는 또한 데이터베이스 테이블에 템플릿 정의를 저장하고있다. 내가 사용하고있는 템플릿은 이전에 하드 코딩 된 HTML 코드이므로 템플릿이 유효하다는 것을 알고 있습니다.

서버에서 JSON 래퍼의 모든 데이터를 올바르게 수신하고 있습니다. 작동하지 않는 것은 내용을 렌더링하는 것입니다. 페이지는 비어 있습니다. 문제는 AngularJS에 대한 이해가 부족하고 어떻게 실행되는지입니다.

[업데이트 됨 : 코드 및 다음 실행 설명이 @Wes H 및 @ 31PIY의 입력으로 다시 작업 한 후 업데이트되었습니다. . 더 이상 $ templateCache 문제, 분명히] 은 특히, 내 HTML은 다음과 같습니다

<body ng-app> 
    <div ng-controller="PageEditController"> 
     <div ng-bind-html="renderHtml(htmlTemplate)"></div> 
    </div> 
</body>

[참고 : renderHtml는 $ sce.TrustAsHtml()에 대한 내 래퍼가 HTML]을

각도에 의해 제거되지 않고 있는지 확인하는 것입니다

그리고 내 자바 스크립트 관련 부분은 다음과 같습니다

 $http({ 
      method: 'POST', 
      url: 'https://my-api-access-point', 
      data: parms 
     }).then(function successCallback(response) { 
       var resp = response.data['Items']; 
       var data = {}; 
       if (resp) 
        data = resp[0]; 
       console.log("jsLoadScreen Data: ", data); 
       $scope.models.fields = data; 
       console.log('replacing template: ', $scope.models.fields['template']); 
       $scope.htmlTemplate = $scope.models.fields['template'];

그리고 콘솔 출력은 다음과 같습니다

jsLoadScreen Data: {UID:"1" 
left:"<h1>↵ One↵</h1>" 
right:"<h2>↵ Two↵</h2>" 
screenId:"1" 
template:"  <div class="row">↵   <div class="column">↵    <div data-editable data-name="left" ng-bind-html="renderHtml(models.fields.left)">↵    </div>↵   </div>↵   <div class="vl"></div>↵   <div class="column">↵    <div data-editable data-name="right" ng-bind-html="renderHtml(models.fields.right)">↵    </div>↵   </div>↵  </div>" 

replacing template:   <div class="row"> 
      <div class="column"> 
       <div data-editable data-name="left" ng-bind-html="renderHtml(models.fields.left)"> 
       </div> 
      </div> 
      <div class="vl"></div> 
      <div class="column"> 
       <div data-editable data-name="right" ng-bind-html="renderHtml(models.fields.right)"> 
       </div> 
      </div> 
     </div>

"(소스보기)"를 통해 템플릿 코드가 페이지에로드되고 있음을 확인했습니다. 그러나 일단로드되면 템플릿 코드에서 javascript 또는 AngularJS 태그가 실행되지 않습니다.

나는이 코드를 실행하기 위해 몇 가지 단계를 시도했다. 새로 고침을 강요하기 위해 템플릿에있는 일부 변수를 만지기 위해 다른 .then()을 추가하는 것뿐만 아니라, 프로세스에서 지연을 초래하는 다양한 불운 한 시도 경쟁 조건이있는 경우. 불운.

AngularJS의 이상한 물속에서 내가 포기하고 서버 측에서 템플릿과 데이터를 결합하여이 작업을 단일 AJAX 작업으로 만들고 두 단계를 수행하지 마십시오. (1) AJAX insert new 일단 삽입되면 HTML 템플릿, (2) AJAX는 새로운 HTML 템플릿에 새로운 데이터를 삽입합니까? 아니면 내가 새로 삽입 된 템플릿 (또는 템플릿을 삽입하는 동안) 뭔가를 자바 스크립트를 실행하기 위해 등록으로해야 할 일이 무엇입니까?

내가 가장 잘 알고있는 설명은 How $templateCache works?과 Load HTML template from file into a variable in AngularJs입니다.하지만 내가하는 말과 내가 실패한 것에 대해 마음을 감쌀 수는 없습니다.

업데이트 : 아래의 이전 응답을 통해 작업 한 후에는 더 자세히 설명합니다. @Wes H 및 @ 31piy의 정보를 통해 이제는 HTML이 페이지에 올바르게로드되었는지 확인했습니다 (Chrome의 개발자 도구에서 '소스보기'로 표시됨). 그러나 다양한 앵귤러 명령 (ng-bind-html (renderHtml ...)) 및 타사 도구 트리거 (데이터 편집 가능)는 Angular로 해석되지 않으므로 HTML이 있지만 자바 스크립트 작업은 수행되지 않습니다. 그것. 내 생각 엔 삽입 된 HTML 템플릿은 어떻게 든 DOM에 저장되지만 Angular (또는 javascript)에 의해 실제로 인식되고 실행되지 않습니다. 생각?

출처

2017-11-22 Doug

@ 31piy & @Wes H에 언급 된 구조 외에도 $compile에 지시문을 사용하는 것이 최종 단계입니다. 여기에있는 솔루션 : Compiling dynamic HTML strings from database

출처

2018-01-11 20:34:32 Doug

시작하려면 면책 조항 ... AngularJS는 전혀 알지 못하므로 소금 한 알씩 먹으십시오!직접 $templateCache 서비스를 소모하여 선언적으로 캐시를 만든 것 같은 https://docs.angularjs.org/api/ng/service/$templateCache

것 같습니다 :

말했다되고 있다는이를 읽은 후, 나는 문서를 살펴했다. 지금, 당신은 다음 방법 중 하나를 통해 렌더링해야합니다 직접 서비스를 소비하고 있기 때문에

myApp.component('myComponent', { 
    templateUrl: 'edit.html' 
});

또는

$templateCache.get('edit.html')

또한, 스크립트 태그에 대한 필요가 없습니다. 문서에 따르면, 당신은 하나의 접근법이나 다른 접근법을 취할 수 있습니다.

희망 하시겠습니까?

출처

2017-12-19 02:33:43 user1786981

모든 관련 구성이 AngularJS 앱에서 수행된다고 가정하면 제 생각에는 $templateCache을 전혀 사용할 필요가 없습니다. 왜? DB에서 HTML 템플릿을 HTML로 설정하려면 (제대로 이해했다면).

이렇게하려면 ng-bind-html을 사용하면 HTML 콘텐츠를 템플릿의 HTML 요소에 바인딩 할 수 있습니다. 이 같은 HTML 템플릿에 직접 바인딩 할 수있는 범위에서 변수 htmlTemplate,이, 이제

$http.post('https://my-api-access-point', parms) 
    .then(function successCallback(response) { 
    // ... Your code 
    // Assign the template to a scope variable here 
    $scope.htmlTemplate = $scope.models.fields['template']; 
    // ... Your code 
    });

: 예를 들면 다음과 같습니다 htmlTemplate의

<div ng-bind-html="htmlTemplate"></div>

이 방법, 내용을 것입니다 div 요소 아래에 나타납니다. 앱에 ngSanitize 모듈을 올바르게 구성했는지 확인해야합니다.

출처

2017-12-19 03:28:17 31piy

여기에 좋은 정보가 있으며 @Wes H와 협력하여 훨씬 가까워졌습니다. 나는 위의 게시물을 더 많은 정보로 업데이트했다. – Doug

$ templateCache이 - 당신이 나열된 첫 번째 link 설명으로는 등이 외에도

templateUrl, NG가-등과 같은 모든 템플릿 URL 요청에 대한 캐싱 유틸리티, 역할, 당신은 $ templateCache을 사용할 수 있습니다 키 - 값 캐시 저장 $ templateCache.put ('KEY', 'HTML string')을 사용하면 템플릿 URL 요청은 네트워크 요청을하기 전에 저장된 키를 검사합니다. 귀하의 경우 수동으로 'edit.html'키에 상점을 추가하므로 항상 값을 검색합니다. 키는 고유 한 문자열이 될 수 있지만 파일 이름 일 필요는 없습니다.

문서에 따라 수행하려는 작업을 수행해야합니다. 그러나 AngularJs에 템플릿 (캐시 된 또는 캐시되지 않은)을 포함시키는 일반적인 방법은 ngInclude를 사용하는 것입니다.

당신과 함께 <script></script> 블록을 교체하는 경우 :

<div ng-include="'edit.html'"></div>

html로 및 $scope.models.fields['template']에서 어떤 바인딩이 렌더링됩니다. 키 주변에 따옴표를 추가하십시오.

다른 잠재적 인 까다로운 부분은 ng-include의 캐시 된 템플릿에 액세스하기 전에 $http에 의해 반환되는 약속을 확인합니다. 그것이 $ scope를보고 약속이 해결 될 때 업데이트하는 ng-bind-html을 사용하는 31piy의 제안이 더 간단 할 수있는 곳입니다.

출처

2017-12-29 03:49:16

여기에 좋은 정보가 있지만 ng-include는 다시로드 할 때 다시 트리거되는 것으로 보이는 무한 루프를 만듭니다. 이유는 모르겠지만 @ 31piy의 ng-bind-html이 closure를 얻는 것처럼 보입니다. 나는 위의 게시물을 더 많은 정보로 업데이트했다. – Doug

데이터베이스의 인라인 코드 사용

답변

관련 문제