AngularJS 1.2.0 ngBindHtml 和 trustAsHtml 不适用于 ngModel

2023-12-03

我觉得这应该很容易,因为我使用 ngBindHtmlUnsafe 让它与 Angular 1.0.8 完美配合。我阅读了我需要使用的 API 文档和 StackOverflow$sce.trustAsHtml() with ngBindHtml现在但我似乎无法让它发挥作用。

鉴于我读到的内容,这基本上是我使用的格式:

var myApp = angular.module('myApp', []);

function myController($scope, $sce){
    $scope.myHtml = $sce.trustAsHtml($scope.sourceText);
}

html:

<html ng-app="myApp">

  <head>
    <script data-require="[email protected]" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="myController">
      <textarea ng-model="sourceText"></textarea>

      <div ng-bind-html="myHtml"></div>
    </div>
  </body>

</html>

我以为事情会这么简单,但我一定是错了,错过了一些东西。

我把这个简单的例子交给了 Plunker:http://plnkr.co/edit/ZX4dONBlzv1X8BcO1IBV?p=preview


这是您要找的吗?http://plnkr.co/edit/IZkzsuKHvbYiyV07CGqp

// would strongly suggest including sanitize in your scripts and injecting it
// into your app here to prevent "unsafe as safe" errors
var myApp = angular.module('myApp', ['ngSanitize']);

myApp.controller('myController', ['$scope', '$sce', function myController($scope, $sce){
  $scope.myHtml = "initial";  //not needed, for testing

  $scope.changeText = function() {
    $scope.myHtml = $sce.trustAsHtml($scope.sourceText);
  }
}]);

网页:

  <head>
    <script data-require="[email protected]" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-sanitize.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="myController">
      <textarea ng-model="sourceText" ng-change="changeText()"></textarea>

      <div ng-bind-html="myHtml"></div>
    </div>
  </body>

</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 1.2.0 ngBindHtml 和 trustAsHtml 不适用于 ngModel 的相关文章

  • 如何将 ng-repeat 分成批次

    我正在做这个 ref checkbox 示例http getbootstrap com javascript buttons examples http getbootstrap com javascript buttons example
  • 如何更改 AngularJS HTTP 调用的基本 URL?

    我的应用程序多次调用 HTTP 如下所示 this http method this method url this url this url 始终设置为 app getdata 之类的内容 现在我已将应用程序的后端移至另一台服务器 我将需
  • 由于运行 Javascript,Firefox 选择下拉列表不断刷新/恢复为默认选项 - AngularJS

    我正在 AngularJS 中构建一个应用程序 但在使用 Firefox 时无法选择下拉菜单 当我单击选择菜单并将鼠标悬停在选项上时 它会将所选选项从光标悬停的选项重置为默认 第一个选项 当选项数量很大时 选择正确的选项变得非常困难 该应用
  • 量角器检查元素是否不存在

    我在基于角度的网站中有一个设置可以打开和关闭下拉菜单 如果关闭 则不会显示在主页上 对于量角器 我需要检查开关关闭时该元素是否不存在 但是 我不应该陷入 未找到元素 错误 因为它是一组许多测试中的一个 我该怎么做 我曾尝试这样做 expec
  • 清除 Angular 表单提交中的输入字段?

    我认为 setPristine 应该执行此操作 但它不在我的项目中 这是我的表格 form name new project ng submit create project div create wrapper input project
  • 通过 Angular 4 进行的 Bootstrap 4 轮播的动态填充不显示图像

    我试图通过 ngFor 迭代包含图像 url 的字符串数组来动态填充 Bootstrap 4 轮播 轮播不显示图像 尽管查看生成的标记一切看起来都很好 我猜测该组件是在 Angular 添加每张幻灯片的 div 之前渲染的 因为 轮播幻灯片
  • 如何使用 AngularJS 输出 JSON 数组中的元素

    JSON 数组定义在作用域中 scope faq Question 1 Answer1 Question 2 Answer2 HTML div f div Output Question 1 Answer1 Question 2 Answe
  • 如果只有一个元素发生变化,为什么 AngularJs 会更新数组/哈希映射的所有元素?

    我有一个简单的哈希图和一个以文本形式显示状态的简单方法 但是当我仅更新 1 个用户状态时 所有这些状态都会更新 为所有用户调用函数 有没有一种方法可以只更新一个元素而不是全部 示例代码在这里 只需看看当您单击 更改状态 按钮时控制台中会发生
  • 如何从外部调用 Angularjs 工厂函数

    我有一个像这样的角度模块 工厂 var app angular module webportal vr directives slider angular flexslider LocalStorageModule multi select
  • 茉莉花间谍多重回报

    我想用 Jasmine 测试我的角度应用程序 所以我创建了一些测试 其中大多数工作正常 但是 我的功能之一要求用户填写提示 测试无法填补这个提示 所以我用spyOn window prompt and returnValue test 这有
  • isElementPresent 的简单量角器测试因不支持的定位器策略而失败

    My test it should allow login function browser get index html username sendKeys administrator password sendKeys password
  • 我可以在 angularjs 指令中使用 JQuery 插件吗?

    总的来说 我对 javascript 很陌生 过去几周我一直在使用 Angular js 构建前端 我在页面上定义了许多指令 Angular 对此非常有用 我的主页如下所示
  • AngularJS 仅当父控制器完成异步调用时加载控制器

    我正在使用 AngularJS 和 Google Cloudendpoint 构建一个网站 架构如下 我有 1 管理整个站点显示 顶部菜单 模式等 的 MainCtrl div div 2 ng view 每个页面都有一个控制器 每个页面都
  • JSESSIONID cookie 未存储

    我有一个用 Angular 编写的前端 在 localhost 3002 上运行 我有一个用 Spring boot 编写的后端 它在 localhost 8080 上运行 我添加了一个过滤器来处理 CORS 我在 SO 上找到并适应了我的
  • 使用 $emit from 指令将事件发送到控制器

    我试图在选择一个项目时发送一个事件 从指令到控制器使用 emit 我有两个针对组织的更新功能 另一个针对人员的更新功能 我的指令应该指定应该发出哪个事件 这是我的更新功能 用于组织 scope updateOrgs function sel
  • AngularJS - 选择单选按钮时触发

    我搜索并尝试了很多 ng xxxx 类型的选项 但找不到那个 我只想在选择单选按钮时调用控制器中的某些功能 所以它可能类似于以下 当然 下面的代码不起作用
  • 服务中的 AngularJS 变量未在视图中更新?

    我花了几天时间把头撞在桌子上 阅读博客文章 以及围绕我的问题提出的问题 我尝试了下面代码的几种变体 但到目前为止没有一个有效 我将不胜感激任何帮助 服务内的 taskList 变量会更新 但控制器中的变量不会更新 控制器 angular m
  • 如何向 DOM 添加支持 Angular 的元素?

    我想以编程方式添加一些支持 Angular 的 DOM 元素 实际上 我可能需要添加自定义组件 我该怎么做 这是一个简单的小提琴来演示这个问题 http jsfiddle net ZJSz4 2 http jsfiddle net ZJSz
  • 用角度js中的字母过滤列表

    我在表格中显示了一个列表 我需要使用名称的第一个字母来过滤结果 在列表上方我有一个字母 A B C D 等等 单击后 字母列表将按名字过滤 例如 列表详细信息是Apple Boy Bridge点击后A Apple将显示 我必须过滤国家名称以
  • 如何并排展开和折叠三个div?

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89

随机推荐

  • 比较熊猫不同年份的同一天

    我是一个新手 仍在试图弄清楚 Pandas 拆分 应用 组合才刚刚开始有意义 但我还没有做到 我正在尝试获取前几年 2013 2015 同一天的历史最高和最低销售电话号码 然后用另一列告诉我 2016 年电话销售高于之前高点或低于之前低点的
  • 复制 C++ 抽象类

    好的 这是一些代码 include
  • iPhone SDK:URL请求未超时

    我遇到了网络请求应该超时的问题 但该方法未被调用 请求如下 define kCONNECT TIMEOUT 20 0 request NSMutableURLRequest requestWithURL aUrl request setHT
  • 使用 C# 创建的图像 - 如何通过 SQL 将它们插入到 BLOB 中

    假设我捕获屏幕截图 有我的代码 int sWidth 1600 sHeight 1200 Bitmap B M P Bitmap sWidth sHeight Graphics gfx Graphics FromImage Image B
  • 带有 ARM M1 的 Mac 上的 cmake 正在运行 x86_64 架构而不是 arm64 的链接器

    我正在尝试编译glfw从具有 M1 arm64 处理器的 Mac 上的源代码开始 在运行链接器时 cmake 奇怪地尝试链接 x86 64 架构的项目 而二进制文件是为 arm64 构建的 我克隆项目 创建名为的构建文件夹cmake bui
  • dplyr:标准评估和 enquo()

    我听说 dplyr 中不推荐标准评估 我们可以做类似的事情enquo and quo 我的原始代码 简化 是 my function lt function data x OriginalX y OriginalY data gt muta
  • 如何在 C# 中禁用 DataGridView 的每个单元格制表位?

    如何在 C 中禁用 DataGridView 的每个单元格制表位 如果用户聚焦在 DataGridView 上并按 Tab 我希望下一个控件将聚焦 而不是聚焦在 DataGridView 的下一个单元格上 我怎样才能做到这一点 Set th
  • Bootstrap 4 上的不可 12 整除的等列

    我有一个小网络应用程序 我想显示 5 列响应式等宽 但我只想要宽度 992px 的设备使用这种布局 对于宽度 等宽的列可以分成多行 但是有一个Safari 弹性盒错误这使得它无法在没有 明确的flex basis or border 两种解
  • @Html.HiddenFor 不适用于 ASP.NET MVC 中的列表

    我正在使用包含列表作为属性的模型 我用从 SQL Server 获取的项目填充此列表 我希望列表隐藏在视图中并传递给 POST 操作 稍后我可能想使用 jQuery 将更多项目添加到此列表中 这使得数组不适合稍后扩展 通常你会使用 Html
  • 每 4 个帖子和 8 个帖子添加类别 -- WordPress Loop

    我正在尝试构建一个内容滑块 以便每张幻灯片包含 8 张图像 为此 我需要在 WP 查询中为每 4 个帖子添加 row fluid 类 并为每 8 个帖子添加 slide 类 我试图实现的 HTML div class coda slider
  • Android:如何创建带有滚动标题的对话框?

    好的 我已经阅读了 And Dev 网站上的自定义对话框说明http developer android com guide topics ui dialogs html CustomDialog 它向您展示如何制作自定义对话框 但不展示如
  • 带有 asynctask 的进度对话框

    我有 3 个类 名为 WebServiceCleint 类的类正在扩展Asynctask and in doInBackgrnd 我正在传递 url 并且正在从网络服务获取数据 但我从另一个类的名为VerifyTeacherId 的方法中调
  • 特定 pandas 列作为 df.apply 输出新列中的参数

    给定一个 pandas DataFrame 如下 import pandas as pd from sklearn metrics import mean squared error df pd DataFrame from dict ro
  • 在 chrome 扩展中使用 tinyeditor wysiwyg 编辑器时出现沙盒访问冲突

    尝试在 Chrome 扩展中加载第三方所见即所得编辑器时 出现以下错误 沙盒访问冲突 阻止了一个帧 chrome extension cmcjindomengjienigbcldekcfnhfped 访问 帧为 空 两个框架都是沙盒的并且缺
  • TreeGrid:设置数据根没有效果

    我正在尝试设置 TreeGrid 我的数据对象如下所示 code success data text children clientname Market contact OpenX Market Advertiser email emai
  • 从 Pandas 输出中删除行计数

    我正在使用 pandas 提取 csv 文件 仅提取一列 然后将其输出到文本文件 我的问题是 当它输出时 它会添加带有行号的行 我需要该行号不存在 到目前为止 我已经尝试了以下代码 当 如果我得到这个工作时 print 将被 file wr
  • C#如何将IEnumerable匿名列表转换为数据表

    有许多解决方案可以将列表转换为DataTable使用反射 并且可以用于转换匿名类型 然而 它有lots匿名类型列表 那么性能可能是一个问题 这是创建一个DataTable从列表中 有更快的方法吗 使用正确命名的 POCO DTO etc 类
  • Jquery Mobile在不同页面上使用相同的页脚

    我希望 jquery 移动应用程序上的所有页面都具有相同的页眉和页脚 并使用不同的文件 例如 footer html 来控制它 使用 PHP include 很容易做到这一点 但我不能 因为我计划将此应用程序与phonegap 一起使用 搜
  • 如何从 Web Worker 访问 chrome.history?

    有什么方法可以访问 chrome api 特别是chrome history 来自网络工作者 如果我将 chrome history 或 chrome 对象传递给postMessage 由于转换错误 它无法工作Transferable ty
  • AngularJS 1.2.0 ngBindHtml 和 trustAsHtml 不适用于 ngModel

    我觉得这应该很容易 因为我使用 ngBindHtmlUnsafe 让它与 Angular 1 0 8 完美配合 我阅读了我需要使用的 API 文档和 StackOverflow sce trustAsHtml with ngBindHtml