Angular ng-show / ng-hide 无法与 ng-bind-html 一起正常工作

2024-03-17

我想为 html 字符串中的元素设置 ng-show 或 ng-hide 并将其传递给 ng-bind-html 查看,但 ng-show / ng-hide 不起作用,我的元素始终可见。

这是我的控制器代码:

  $scope.my = {
    messageTrue: true,
    messageFalse: false
  };

  $scope.HtmlContent = "<div ng-show='{{my.messageFalse}}'>This is incorrect (ng-show & my.messageFalse={{my.messageFalse}})</div> ";
  $scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);

这是我的视图代码:

<div ng-show="my.messageTrue">This is correct (ng-show & my.messageTrue={{my.messageTrue}})</div>
<div ng-hide="my.messageFalse">This is correct (ng-hide & my.messageFalse={{my.messageFalse}})</div>
<div ng-bind-html="trustedHtml"></div>

这是一个 Plnkr http://plnkr.co/edit/tbmULwHdAimLoXJGLnEb?p=preview对于我的问题。 (感谢Xaero https://stackoverflow.com/users/3798176/xaero)

对不起,我的英语不好。谢谢


这是因为您注入的 html 尚未通过 Angular 进行编译和链接,因此它只是“按原样”显示。如果您根本不包含 angular.js,那么它的处理方式与您的标记的处理方式相同。

解决方案是创建一个与 ng-bind-html 类似的指令,但还包括编译和链接 html 片段的步骤。

这个链接 http://ngmodules.org/modules/ng-html-compile是此类指令的一个示例。

这是代码:

angular.module('ngHtmlCompile', []).
    directive('ngHtmlCompile', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) {
                element.html(newValue);
                $compile(element.contents())(scope);
            });
        }
    }
});

和用法。

<div ng-html-compile="trustedHtml"></div> 

这是工作Plunk http://plnkr.co/edit/C0tl3dluTbSyOQudzyOV?p=preview

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

Angular ng-show / ng-hide 无法与 ng-bind-html 一起正常工作 的相关文章

随机推荐

  • 关于 VB6 / VBA 中 CreateObject() 的问题

    我可以做这个 Dim fso As New FileSystemObject 或者我可以这样做 Dim fso As Object Set fso CreateObject Scripting FileSystemObject 我如何知道
  • 如何调试 strace 中显示的 futex 争用?

    我正在调试多线程 Linux 进程中的一个问题 其中某个线程似乎没有执行几秒钟 查看 strace 输出发现它等待 futex 例如1673109 14 36 28 600329 futex 0x44b8d20 FUTEX WAIT PRI
  • Office剪贴板格式

    如果我从 Excel 2007 复制图形并在另一个 Office 应用程序中选择 选择性粘贴 我会看到一种名为 Microsoft Office 图形对象 的剪贴板格式 它允许与增强型图元文件不同的自定义 如何从我自己的 C 应用程序创建这
  • 下载 iAP 托管内容卡在 SKDownloadState 等待某些用户

    和标题说的差不多 该代码适用于沙盒环境中的所有开发设备以及大多数用户 然而 有些用户报告说 即使整夜下载过程也不会超出等待状态 SKDownloadStateWaiting 有些人确实在几次尝试后设法开始下载 完全关闭应用程序并通过恢复购买
  • 需要用户输入的 ffmpeg cli 过滤器

    有没有办法为 ffmpeg 编写过滤器脚本 这样当我给出输入时 过滤器就会改变行为 例如 在录制流时 使用某个键更改对比度 或者使用另一个键混合两个视频 我已经看到我可以以静态方式执行此操作 例如使用新行为重新启动记录 然后调用 conca
  • 函数式编程的分析与设计[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 升级到 El Capitan 后出现无效的活动开发人员路径错误

    当我输入 git init 时 我在尝试推送到 git 时遇到了这个错误 xcrun 错误 无效的活动开发人员路径 Library Developer CommandLineTools 缺少 xcrun 库 开发人员 CommandLine
  • 如何从 Google 云端硬盘视频获取redirector.googlevideo.com 链接

    我有一个谷歌驱动器视频文件 例如https drive google com file d FILE ID view https drive google com file d FILE ID view 并且我想获取其redirector
  • 实用地将数据从 Neo4j 导出到 csv 文件

    我需要你关于 neo4j 导出的建议 我使用 apoc export cypher query 将节点和关系导出到 csv 文件 但是导出的内容是 cypher 语句 这是导出的 csv 文件示例 begin CREATE ITEM UNI
  • 如何检查字符串是否包含从a到z的任何字母? [复制]

    这个问题在这里已经有答案了 可能的重复 C 正则表达式 检查 a z 和 A Z https stackoverflow com questions 6017778 c sharp regex checking for a z and a
  • fullCalendar 多日活动开始和结束时间

    多日活动很少有一个开始和一个结束时间 例如 伯明翰动漫展可能会持续三天 但你不能在凌晨 1 点出现 活动举办的三天中 每一天都有单独的开始和结束时间 我无法在文档中找到有关每个事件的多个开始和结束时间的任何内容 还有其他人吗 Edit 如果
  • 使用 Matplotlib 绘制网格

    我想在Python中使用Matplotlib绘制一个自定义的网格 我知道的np meshgrid函数 可以使用它来获取我想要连接的不同点的数组 但我不确定如何绘制网格 代码示例 x np linspace 0 100 100 y np li
  • 如何比较两个 X509Certificate2 c#

    如何比较两个 X509Certificate2 对象 我需要查找两个证书是否相同 它用于用户身份验证目的 我需要查找两个证书是否属于同一个人 我可以使用其序列号或指纹属性吗 或者还有其他方法吗 另外我对此很陌生 想知道使用 X509Cert
  • 为什么盒子阴影和元素之间有间隙?

    当将鼠标悬停在 Chrome 76 0 3809 100 64 位 中的按钮上时 框阴影和 img 之间会出现微弱的间隙 为什么会发生这种情况以及如何修复它 这是一张图片 以防您在代码片段中看不到它 body background colo
  • Java 中的空布局有什么问题? [复制]

    这个问题在这里已经有答案了 Bonjour 在花了无数时间在这个网站上寻找在屏幕上拖动组件的代码后 我注意到答案中出现了一个奇怪的趋势 每个人都对空布局的声音感到不寒而栗 所以我问 大家都有什么问题吗 我编写代码的时间不超过三个月 使用 S
  • 如何使用PHP处理多个文件上传

    我想使用 PHP 上传文件 但问题是我不知道要上传多少个文件 我的问题是如果我使用的话如何上传文件file
  • 如何在单个动画中缩放和旋转视图

    我试图通过使其从屏幕中心出现同时增长到其完整尺寸来呈现视图 同时以 3D 方式围绕 x 轴旋转它 当我创建视图时 我对其应用变换以确保它收缩并旋转以开始 它太小 实际上不可见 然后我尝试使用 CATransform3D 如下所示 CABas
  • 我如何知道golang中结构体的长度?

    我是 Golang 新手 我正在尝试从结构中获取许多属性 例如 type Client struct name string 1 lastName string 2 age uint 3 func main client Client na
  • 我希望“(int)null”返回0

    我怎样才能得到 0 作为整数值 int null EDIT 1 我想创建一个函数 它将返回各自数据类型中空表示的默认值 EDIT 2 我怎样才能从事这个工作scenario用于使用default 整数 值 Where 值可以为空或任何整数价
  • Angular ng-show / ng-hide 无法与 ng-bind-html 一起正常工作

    我想为 html 字符串中的元素设置 ng show 或 ng hide 并将其传递给 ng bind html 查看 但 ng show ng hide 不起作用 我的元素始终可见 这是我的控制器代码 scope my messageTr