AngularJS:从字符串插入 HTML [英] AngularJS: Insert HTML from a string

问题描述

我为此找了很多，但我要么找不到答案，要么不明白.一个具体的例子将赢得投票=)

• 我有一个返回 HTML 字符串的函数.
• 我无法更改功能.
• 我希望将字符串表示的 html 插入到 DOM 中.
• 我很乐意使用控制器、指令、服务或任何其他有效的东西(而且是相当好的做法).
• 免责声明:我不太了解 $compile.

这是我尝试过的:

//我神奇的 HTML 字符串函数.函数 htmlString (str) {返回<h1>"+ str + "</h1>";}功能 Ctrl ($scope, $compile) {$scope.htmlString = htmlString;}Ctrl.$inject = ["$scope", "$compile"];

那没用.

我也尝试将其作为指令:

//我神奇的 HTML 字符串函数.函数 htmlString (str) {返回<h1>"+ str + "</h1>";}angular.module("myApp.directives", []).directive("htmlString", function () {返回 {限制:E"，范围:{内容:@"}，模板:{{ htmlStr(内容)}}"}});...在我的 HTML ...<html-string content="foo"></html-string>

帮助?

注意

我查看了这些，但没有让它发挥作用.

• AngularJS:将 HTML 插入视图
• AngularJS $http HTML 解析器
• angularjs - 插入 $compile-d html
• AngularJS 不会在插入文档的 HTML 中执行.写()
• 转义 AngularJS 指令中的 HTML 文本

解决方案

看看这个链接中的例子:

http://docs.angularjs.org/api/ngSanitize.$sanitize

基本上，angular 有一个指令将 html 插入到页面中.在您的情况下，您可以使用 ng-bind-html 指令插入 html，如下所示:

如果你已经完成了这一切:

//我神奇的 HTML 字符串函数.函数 htmlString (str) {返回<h1>"+ str + "</h1>";}功能 Ctrl ($scope) {var str = "你好！";$scope.htmlString = htmlString(str);}Ctrl.$inject = ["$scope"];

然后在该控制器范围内的 html 中，您可以

I've looked a LOT for this, but I either I can't find the answer or I don't understand it. A specific example will win the vote =)

• I have a function that returns an HTML string.
• I can't change the function.
• I want the html represented by the string to be inserted into the DOM.
• I'm happy to use a controller, directive, service, or anything else that works (and is reasonably good practice).
• Disclaimer: I don't understand $compile well.

Here's what I've tried:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope, $compile) {
  $scope.htmlString = htmlString;
}
Ctrl.$inject = ["$scope", "$compile"];

That didn't work.

I tried it as a directive too:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

angular.module("myApp.directives", [])
  .directive("htmlString", function () {
    return {
      restrict: "E",
      scope: { content: "@" },
      template: "{{ htmlStr(content) }}"
    }
  });

  ... and in my HTML ...

  <html-string content="foo"></html-string>

Help?

Note

I looked at these, among others, but couldn't make it work.

• AngularJS : Insert HTML into view
• AngularJS $http HTML Parser
• angularjs - inserting $compile-d html
• AngularJS doesn't execute in HTML inserted with document.write()
• Escape HTML text in an AngularJS directive

解决方案

Have a look at the example in this link :

http://docs.angularjs.org/api/ngSanitize.$sanitize

Basically, angular has a directive to insert html into pages. In your case you can insert the html using the ng-bind-html directive like so :

If you already have done all this :

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope) {
  var str = "HELLO!";
  $scope.htmlString = htmlString(str);
}
Ctrl.$inject = ["$scope"];

Then in your html within the scope of that controller, you could

<div ng-bind-html="htmlString"></div>

这篇关于AngularJS:从字符串插入 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！