使用AngularJS与innerHTML

5
我有一些AngularJS的内容,其中包含许多数组和数据。一旦用户上传文件,该文件将被解析并保存到作用域中,其不同的数组也会被保存。然而,在所有这些操作完成后,当我尝试更新innerHTML时,AngularJS代码无法工作。我使用ng-repeat基于数组创建表格,但它仍然是一个单元格,并且内容看起来像{{column}}等。
我在使用指令和模板方面遇到了极大的困难,因为我的index.html文件说当我执行app.directive(...之类的操作时,appmodule等是未定义的。
我的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>

这是一个关于如何设置我的作用域的简单示例,涉及编程相关内容:
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: 我尝试使用$compile,但它被标记为未定义。我查看了this来解决编译问题,但我不理解rtcherry的语法,也不知道如何将其应用到我的代码中。
编辑2: 当我像这样包含它时,仍然收到$compile未定义的错误:
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!


3
innerHTML = $compile("<div ng-controller='sheet'>{{stuff}}</div>")(scope)innerHTML = $compile("<div ng-controller='sheet'>{{stuff}}</div>")(scope) 表示将一个字符串编译为 AngularJS 模板,并在给定的作用域(scope)上下文中执行该模板,生成一段 HTML 代码。其中 ng-controller 属性指定了该模板所对应的控制器为 'sheet',双括号中的 stuff 则是该模板要渲染的数据。 - Ajay Beniwal
你可以像使用其他Angular服务/工具一样注入$compile。就像你使用$scope或$rootScope那样。 - alfrescian
我仍然收到错误信息。请查看我的最新编辑。 - user2465164
9
重要提示:在Angular.js中不应使用innerHTML。 - Code Whisperer
3个回答

5

对我来说有效

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

0

简单的解决方案(百分之百有效):

在控制器中,不要忘记将 $document 注入到控制器中作为依赖项,像这样:

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');
}

0

ngBindHtml

  • ng 模块中的指令

评估表达式并以安全的方式将生成的 HTML 插入元素。默认情况下,将使用 $sanitize 服务对生成的 HTML 内容进行清理。要使用此功能,请确保 $sanitize 可用,例如,通过在模块的依赖项中包括 ngSanitize(而不是核心 AngularJS)。为了在您的模块依赖项中使用 ngSanitize,您需要在应用程序中包含 "angular-sanitize.js"。

用法

as element:

    <ng-bind-html
      ng-bind-html="expression">
    ...
    </ng-bind-html>

as attribute:

    <ANY
      ng-bind-html="expression">
    ...
    </ANY>



网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接