javascript - 将 AngularJS 与 innerHTML 一起使用

标签 javascript angularjs total.js

我有一些 AngularJS 的东西,里面有一堆数组和数据。用户上传文件后,文件将被解析并保存到具有不同数组的范围中。然而,在所有这些和文件保存在范围内之后,我尝试更新 innerHTML,但 AngularJS 代码不起作用。我用 ng-repeat基于数组创建一个表,但它仍然是一个单元格,其内容看起来像 {{column}}之类的。

我在使用指令和模板时遇到了极大的困难,因为我的 index.html 说 appmodule等,当我做诸如 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: 我试过使用 $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!打印。

最佳答案

对我有用

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

关于javascript - 将 AngularJS 与 innerHTML 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17662900/

相关文章:

javascript - 导航栏折叠不起作用 - Bootstrap + Github

javascript - 保存字体文件以供离线查看

javascript - 使用 $locationProvider 从 URL 中删除 # 时出错

javascript - ngview 添加部分内容并保留现有内容

javascript - 在 angularjs 中设置 <option> 中的默认选定值

javascript - 如何使用 Node.js、websocket 和total.js 将数据传递到 Mongodb

javascript - 在输出之前过滤 TinyMCE javascript

javascript - Node.js + Mongoose 中的基本建模

javascript - Totaljs websocket 模块与 socket.io

javascript - Node.js - 当 Nginx 反向代理提供服务时,Websocket 拒绝打开连接