AngularJS with innerHTML 사용

배열과 데이터가 많이 들어있는 AngularJS 항목이 있습니다. 사용자가 파일을 업로드하면 파일이 파싱되어 다른 배열로 범위에 저장됩니다. 그러나이 모든 파일을 범위에서 보유한 후 innerHTML 업데이트하려고하지만 AngularJS 코드가 작동하지 않습니다. ng-repeat을 사용하여 배열을 기반으로 테이블을 만들었지 만 콘텐츠가 {{column}} 인 단일 셀로 유지됩니다.AngularJS with innerHTML 사용

내 index.html을 말한다 때문에 지침과 템플릿을 사용하여 극단적 인 어려움이 있었다 app 및 module, 그 등 내가 app.directive(...

등의 일을 할 때, 정의되지 내 index.html 파일의 중요한 부분은 다음과 같습니다 :

<html ng-app> 
... //once a file is uploaded, total.js is called; 
//this was so the app didn't try to run before a file was uploaded 
<div id="someStuff">This will become a table once a file is uploaded</div>

이 내 범위가 total.js에서 설정 방법에 대한 간단한 예입니다

function sheet($rootScope, $parse){ 
    $rootScope.stuff = text; 
//text is a variable that contains the file's contents as a string 
}; 

document.getElementById('someStuff').innerHTML="<div ng-controller='sheet'>{{stuff}}</div>";

HTML이 변경되지만 파일의 내용을 인쇄하는 대신 {{stuff}} 만 인쇄합니다. innerHTML에 AngularJS가 포함되어 있다는 것을 이해하려면 어떻게해야할까요? 부분적으로나 지시어를 사용하지 않는 것이 좋습니다. 단, 입력 한 부분과 구문을 철저히 설명 할 수있는 경우는 제외합니다.

편집 1 : 나는 $ 컴파일을 사용하여 시도했지만 그것이 정의되지 않은 것으로 표시되어 . 컴파일 문제를 파악하기 위해 this을 보았지만 rtcherry의 구문을 이해할 수 없으며이를 내 자신의 코드에 적용해야합니다.

편집 2 : 내가 지금처럼을 포함 할 때 난 아직도 $ 정의되지 않은 컴파일 오류가 나타납니다

function sheet($rootScope, $parse, $compile){...}; 
document.getElementById('someStuff').innerHTML=$compile("<div ng-controller='sheet'> 
{{stuff}}</div>")(scope);

편집 3 : itcouldevenbeaboat의 의견이 매우 도움이되지 않는 동안, 나는 결정 나는 쇼 아마도해야 당신이 지시 한대로 제가 그것을 시도했습니다.

나는 나의 시트 기능에서이 코드를 포함 : innerHTML을가 <div ng-controller='sheet'>{{stuff}}</div>를 포함하고 index.html을에 나는이와 <div spreadsheet></div>

포함 시켰습니다

var app = angular.module('App', []); 
app.directive('spreadsheeet', function($compile){ 
    return{ 
     templateUrl: innerHTML.html 
    } 
});

, 나는 오류가 나타날을하지만, 텍스트는 않습니다 표시되지 않으며 {{stuff}} 또는 파일의 내용으로 표시되지 않습니다. templateUrl 대신 template: "<h2>Hello!</h2>"을 제공하는 등 간단한 작업을 수행하더라도 Hello!을 인쇄 할 수 없습니다.

출처

2013-07-15 user2494584

innerHTML을 = $ 컴파일 ("

") (범위) –

당신은 INJ 수 있습니다 다른 각도 서비스/도구와 같은 컴파일 $. $ scope 또는 $ rootScope를 사용하는 것과 같은 방법입니다. – alfrescian

여전히 오류가 발생합니다. 제 최근 편집을 참조하십시오. – user2494584

그것은 나를 위해 작동

document.getElementById('someStuff').innerHTML = "<div ng-controller='sheet'>{{stuff}}</div>"; 
$compile(document.getElementById('someStuff'))($scope);

출처

2014-10-21 23:33:31 Mher

간단한 솔루션 (그것은 100 % 작동) :

컨트롤러에서 이 종속성으로 컨트롤러에 $ 문서를 주입하는 것을 잊지 마세요를, 같은 :

는

App.controller('indiaController', function ($scope, $document,$filter, $location) { 

    var text_element = angular.element($document[0].querySelector('#delhi'); 
    text_element.html('your dynamic html placed here'); 
}

출처

2018-02-05 18:18:12 ngCourse

AngularJS with innerHTML 사용

답변

관련 문제