在innerHTML中使用AngularJS

我有一些AngularJS的東西，包含一堆數組和數據。一旦用戶上傳文件，文件就會被解析並保存到具有不同陣列的範圍中。但是，在所有這些和文件被保存在範圍之後，我嘗試更新innerHTML，但AngularJS代碼不起作用。我使用ng-repeat來創建基於陣列的表格，但它仍然是一個單元格，其內容看起來像{{column}}等。在innerHTML中使用AngularJS

我不得不使用指令和模板，因爲我說的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，最好不使用partial或directive，除非你能夠徹底解釋我在哪裏輸入它和它的語法。

編輯1： 我試過使用$編譯，但它被標記爲未定義。我看着this找出編譯問題，但我不明白rtcherry的語法，以及我應該如何將它應用到我自己的代碼中。

編輯2： 我仍然收到$編譯未定義的錯誤，當我包括它像這樣：

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

編輯3： 雖然itcouldevenbeaboat的評論是非常無益的，我決定，我也許應該秀你是我嘗試去做的指示方式。

我包括在我的頁功能驗證碼：

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

其中的innerHTML包含<div ng-controller='sheet'>{{stuff}}</div>和index.html的我已經包括<div spreadsheet></div>

有了這個，我收到任何錯誤，但文字不沒有出現，既不是{{stuff}}或作爲文件的內容。即使我做了簡單的事情，例如提供template: "<h2>Hello!</h2>"而不是templateUrl，我也無法打印Hello!。

來源

2013-07-15 user2494584

的innerHTML = $編譯（「

」）（範圍） –

可以注射ect $像其他角度服務/工具一樣編譯。就像你想使用$ 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

在innerHTML中使用AngularJS

回答

相關問題