在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

回答

相关问题