使用 AngularJS ng-bind-html 时从 json 数据获取 img src

2024-04-28

所以我有一个有趣的问题,但我还没有找到答案。

假设我从 JSON 文件中获得了一堆数据,但不知何故,其中一个主要字段如下所示

description : '<img src="http://o.aolcdn.com/hss/storage/midas/37c38989a5f26031be3e0ec5ffc5cd2/200012386/got-hbo-go-crash-2014-04-07-01_thumbnail.jpg"/> Viewing of the Game of Thrones season debut came to a crashing halt yesterday thanks to server problems with HBO Go. The cable outfit first reported the problem late yesterday via Twitter, and finally restored full service early this morning. That...'

当使用 ng-bind-html 将 json 数据绑定到我的页面上的 innerHTML 时,我如何能够从该 IMG 获取 src。 (在 img 本身上使用 display:none; 这样就不会显示)

我尝试过 getElementsByTags 等,但没有返回有效值。

是否有某种“有角度”的方式来做到这一点或者......?

BR's


根据存储在对象中的 html,您可以执行以下操作:

var json = {description : '<img src="http://o.aolcdn.com/hss/storage/midas/37c38989a5f26031be3e0ec5ffc5cd2/200012386/got-hbo-go-crash-2014-04-07-01_thumbnail.jpg"/> Viewing of the Game of Thrones season debut came to a crashing halt yesterday thanks to server problems with HBO Go. The cable outfit first reported the problem late yesterday via Twitter, and finally restored full service early this morning. That...'};

  $scope.imgPath = '';

  $scope.getImage = function() {
    el = angular.element(angular.element('<div>' + json.description + '</div>').find('img')[0]);
    $scope.imgPath = el.attr('src');

  }

这是一个演示:http://plnkr.co/edit/JXy97lrN5FyW1MK33qO1?p=preview http://plnkr.co/edit/JXy97lrN5FyW1MK33qO1?p=preview

此解决方案假设 jQuery 不包含在项目中。

这也有效:

 $scope.imgPath = angular.element(json.description).attr('src');

Demo: http://plnkr.co/edit/zVllp9bmsU2DoZwDZnCY?p=info http://plnkr.co/edit/zVllp9bmsU2DoZwDZnCY?p=info

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

使用 AngularJS ng-bind-html 时从 json 数据获取 img src 的相关文章

  • Jquery:排除元素

    我有以下代码 document ready function a rel each function this qtip content text img class middle src i icon processing gif alt
  • es6-module 默认导出导入为未定义

    我不确定我在这里缺少什么 我正在使用 jspm 和 es6 module loader 开发一个项目 我有一个模块定义如下 import hooks from hooks import api from api import tools f
  • 当系列没有相同的时间值时,如何在工具提示中显示所有系列

    我有一个显示多个时间序列的图表 不同时间序列不会同时采样 有没有办法在工具提示中显示所有系列 在示例中 您可以看到所有系列都包含在前 2 个点的工具提示中 因为它们是同时采样的 其余点仅包含 1 个系列 var myChart echart
  • 2 个 SVG 路径的交集

    我需要检查两个 SVG Path 元素是否相交 检查边界框与 getBBox 太不准确了 我目前正在做的是迭代两条路径 getTotalLength 然后检查是否有两个点 getPointAtLength 是平等的 下面是一个片段 但正如您
  • 如何创建显示/隐藏 Docusaurus 项目中所有详细标签状态的按钮?

    根据讨论here https stackoverflow com questions 58579048 how to add or remove the open attribute from all details tags in a r
  • Lodash _.hasIntersection?

    我想知道两个或多个数组是否有共同的项目 但我不在乎这些项目是什么 我知道 lodash 有一个 intersection方法 但我不需要它来遍历每个数组的每个项目 相反 我需要类似的东西 hasIntersection一旦找到第一个常见的出
  • Xpath 获取 if href 包含字符串的一部分

    您好 我尝试获取包含 href p random tagged see 的所有元素 这是我的路线 div preceding h2 text Most recent div div a href p tagged see 我该如何修复此代码
  • 使用 jQuery 获取 JSON Facebook Graph API 用户信息

    我正在尝试使用图形 API 来获取有关用户的一些基本信息 无需用户授权 只需获取公共详细信息 我正在尝试使用 jQuery 和 getJSON 来获取数据并解析它 但我很难弄清楚如何访问我想要的键值对 我想要有类似的东西 var fburl
  • 将 JSON 数组转换为 bash 数组并保留空格

    我想将 JSON 文件转换为 bash 字符串数组 稍后我可以对其进行迭代 我的JSON结构如下 USERID TMCCP CREATED DATE 31 01 2020 17 52 USERID TMCCP CREATED DATE 31
  • 如何从代码隐藏中向我的 div 添加点击事件?

    如何从代码隐藏中向我的 div 添加点击事件 当我点击 div 时 会出现一个消息框 其中显示 您想删除它吗 并在框中显示 是 或 否 全部来自后面的代码 while reader Read System Web UI HtmlContro
  • 如何从 Visual Studio Code API 打开浏览器

    我只是在探索一种从用于开发扩展的 Visual Studio Code API 打开默认浏览器的方法 以下是我的代码 var disposable vscode commands registerCommand extension brow
  • 单击 html 中的按钮后如何从 javascript 函数写入文件

    我正在尝试编写真正基本的代码 在 html 文件上按下按钮后 通过 JavaScript 函数在本地写入 txt 文件 这不可能吗 我可以仅使用 javascript 文件写入文件 但在尝试同时使用两者时则不能
  • 防止语言环境文件中的 HTML 字符实体被 Rails3 xss 保护破坏

    我们正在构建一个应用程序 这是我们第一个使用 Rails 3 的应用程序 并且我们必须从一开始就构建 I18n 作为完美主义者 我们希望在我们的视图中使用真正的排版 破折号 卷曲引号 省略号等 这意味着在我们的 locales xx yml
  • 使用 jQuery 的 ajax 方法以 blob 形式检索图像

    我最近问了另一个 相关 问题 这导致了这个后续问题 提交数据而不是输入表单的文件 https stackoverflow com questions 17643142 submitting data instead of a file fo
  • JS - 如何将图像对象变成灰度并显示它

    基本上 当单击按钮时 它会告诉移动设备转到相机 一旦相机拍照 它就会给我图像数据 它被称为数据 URL 吗 这是我处理它的代码 var imagesrc data image jpeg base64 imageData var myimag
  • javascript 加壳器与压缩器

    我想知道加壳器与压缩器的区别 优点是什么 即您应该在网络应用程序中部署压缩版本还是压缩版本 示例代码 var layout NAVVISIBLE 1 Init function this Resize Dimensions function
  • 使用 CSP 防止自动点击链接 XSS 攻击

    当将 CSP 用于稍微不同的目的 沙箱 时 我意识到一个非常简单的自动点击链接似乎甚至可以绕过相对严格的 CSP 我所描述的内容如下 内容安全政策 default src none script src unsafe inline 还有身体
  • 如何将函数导入到Vue组件中?

    我正在尝试将单个函数导入到我的 Vue 组件中 我为我的函数创建了一个单独的 js 文件 randomId js exports randomId gt My function 在我的 Vue 组件中 我导入了 Random js let
  • gjs 如何使用 g_data_input_stream_read_line_async 在 Gnome Shell 扩展中读取套接字流

    我正在尝试编写一个 Gnome Shell 扩展 通过 Socket 服务器与 Arduino 进行通信 服务器和 Arduino 运行良好 但我陷入了监听传入服务器消息的扩展代码 因为我需要一种非阻塞方法 所以使用异步读取行 https
  • 如何向 SvelteKit/Vite 应用添加版本号?

    我正在尝试在我的 SvelteKit 应用程序中创建一个系统 它会在某个页面上向您显示有关当前应用程序版本的信息 最好是 Git 提交哈希和描述 我尝试使用Vite的定义功能 https vitejs dev config define在构

随机推荐