Question

我有一些AngularJS东西，它包含一堆数组和数据。用户上传文件后，文件将被解析并保存到具有不同数组的范围中。但是，在完成所有这些并且文件保留在作用域中之后，我尝试更新innerHTML，但AngularJS代码不起作用。我使用ng-repeat创建一个基于数组的表，但它仍然是一个内容类似{{column}}之类的单个单元格。

我在使用指令和模板方面遇到了极大的困难，因为我的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或者指令，除非你能彻底解释我输入它的位置及其语法。

编辑1： 我尝试过使用$ compile但它被标记为未定义。我查看this以找出编译问题，但我不理解rtcherry的语法，以及我应该如何将它应用于我自己的代码。

编辑2： 当我像这样包含它时，我仍然收到$ compile undefined错误：

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!。

Answer 1

它对我有用

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

Answer 2

简单的解决方案（它将100％工作）：

在控制器中，不要忘记在控制器中注入$ document 作为依赖项，如下所示：

chameleon

将AngularJS与innerHTML一起使用

2 个答案: