在 ng-if 中调用 Javascript

2024-01-18

我有一些遗留的 jQuery 代码。这是一大块代码,所以我宁愿稍后再移植它。要使用它,我调用$('#legacyId').legacyFunction().

不过,事情是这样的。

我有一个 ng-if。在 ng-if 中,我有 JavaScript,我可以在其中调用我的旧函数。

<div ng-if="status=='yes'">
    <div id="legacyId">
        I am a legacy div!
    </div>
    <script type="text/javascript">
        $('#legacyId').legacyFunction()
    </script>
</div>

看起来这个 JavaScript 在页面加载时被调用。虽然我在 jQuery 之后加载 Angular,但 Angular 似乎删除了 ng-if 控制下的部分,因此 jQuery 函数#legacyId fails.

有任何想法吗?谢谢!


编辑注释:我在 HTML 文档顶部导入 jQuery 和扩展 jQuery 的遗留代码。 Angular 加载在文档的底部。


编辑注释2: 我也试过了<div ng-init="$('#legacyId').legacyFunction()"></div>,但我收到一个错误,Error: [$rootScope:inprog] $apply already in progress.


好的,设法解决了这个问题。

在 HTML 中:

<div ng-if="status=='yes'">
    <div legacy-directive>
        I am a legacy div!
    </div>
</div>

在我的应用程序代码中:

app.directive('legacyDirective' , function() {
   return {
        link: function(scope, element, attrs) {
            $(element).legacyFunction(scope.$eval(attrs.legacyDirective));
        }
   }
});

因为$(element).legacyFunction(scope.$eval(attrs.legacyDirective));,看起来我也可以将参数传递给legacyFunction; e.g. <div legacy-directive='{myParameter: true}>

谢谢所有回答的人!你让我走上了正确的道路。

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

在 ng-if 中调用 Javascript 的相关文章

  • 使用 Angular JS 调用 Restful API 时的跨域问题

    我正在尝试访问一个宁静的 API 这会产生错误 如何解决这个跨域问题 错误是 Access Control Allow Origin header is present on the requested resource function
  • 如何向 DOM 添加支持 Angular 的元素?

    我想以编程方式添加一些支持 Angular 的 DOM 元素 实际上 我可能需要添加自定义组件 我该怎么做 这是一个简单的小提琴来演示这个问题 http jsfiddle net ZJSz4 2 http jsfiddle net ZJSz
  • 如何更改 angularjs $http.jsonp 的标头

    我读了document http docs angularjs org api ng 24http 但我想我一定是误解了 http defaults headers jsonp Accept application json http js
  • 使用 angularjs 为多选下拉列表分配默认值

    我正在使用这个插件http dotansimha github io angularjs dropdown multiselect http dotansimha github io angularjs dropdown multisele
  • XmlHttpRequest CORS POST 发送时不带 cookie

    我有一个 Rails 服务为我的 AngularJS 前端应用程序返回数据 该服务配置为通过返回足够的标头来允许 CORS 请求 当我发出 GET 请求来接收数据时 会发送 CORS 标头 以及我之前在登录时收到的会话 cookie 您可以
  • 为 HTML5 Django Web 应用程序实现实时通知系统

    我目前正在开发一个由 Django apache 提供服务的 HTML5 Web 应用程序 该应用程序的目标是监视多个设备 所有客户端逻辑都是用 Angular 编写的 所有数据都来自对后端进行的基于 JSON 的类似 REST 的调用 我
  • 访问指令的范围与嵌入内容隔离

    我不确定这是否真的可能 但我本质上想要 AngularJS 中 隔离范围的反转 这里有一个Plunkr http plnkr co edit 3xL5MrdJSfYH22ivkYJS展示 基本上 我设置了一个自定义指令来提供一些可重用的 H
  • 如何识别 YouTube 播放器的音量变化

    我正在使用 angualr youtube embed 指令将 YouTube 播放器嵌入到我的 Angular Web 应用程序中 因为我必须识别播放和暂停以及音量变化事件 为了监听播放和暂停事件 我使用下面给出的代码 scope on
  • 函数调用后的两组括号

    我正在寻找如何filters http docs angularjs org api ng 24filter在 Angularjs 中工作 我发现我们需要发送 2 组括号 filter number number fractionSize
  • getLocationAbsUrl 与 getCurrentUrl

    在量角器中 全球可用browser对象有两个方法 getLocationAbsUrl http angular github io protractor api view Protractor prototype getLocationAb
  • 为什么在这个函数定义中像这样使用“window.angular”?

    我正在尝试理解一个我需要用来与 Django 集成的 angularjs 文件 它有一个我不熟悉的奇怪语法 请记住我是一名初级开发人员 所以这可能是你的面包和黄油 它是这样的 function angular undefined use s
  • AngularJS 插值错误

    我正在显示房间的属性 作为我正在开发的房间管理应用程序的一部分 这是输出 如您所见 Beamer 英文投影仪 的值为 Sony lamp 01 12 2013 此输出是正确的 但当我打开控制台时 我看到一些有关插值的错误 更大的分辨率 Ca
  • Angular 1.0.8 $resource 具有多个可选的获取参数

    我的学生 url 如下所示 var Student resource app student studentid courseId studentid id courseId cid 当我不带参数调用它时 我希望 url 为 app stu
  • Angularjs 手表服务对象

    为什么我无法观看服务中的对象 我有一个简单的变量可以工作 但是一个对象不能工作 http plnkr co edit S4b2g3baS7dwQt3t8XEK p preview http plnkr co edit S4b2g3baS7d
  • 以角度选择项目后保持菜单打开

    单击我的菜单后 我的菜单将关闭toggleShare按钮 我怎样才能防止这种情况 我将 angularJS 与 Angular 材料一起使用 这是我的代码
  • 在 Angular e2e 测试中获取浏览器路径会导致异常

    我有一个简单的 e2e 测试来验证路由重定向是否有效 跑步者 html 场景 js use strict describe e2e function beforeE
  • 如何在量角器中模拟拖放动作?

    我有一个双滑块 我想测试它是否可操作并返回正确的数据 滑块有一个最小和一个最大处理程序 它还有一些 我可以挂钩的断点 我想要模拟的是 handler max 元素的 touchStart 将拇指移动到类为 step 3 的元素上 handl
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div

随机推荐

  • Java - 实现忙等待机制

    在我的项目中 到目前为止我已经 同步 了多个线程 每个线程都运行相同类型的Runnable 用一个CyclicBarrier http download oracle com javase 6 docs api java util conc
  • 如何在 iPhone 中从左到右设置动画视图?

    如何对从左到右的视图过渡进行动画处理 类似推送视图 当我单击按钮时 视图应该从左向右转换 所以请指导我并提供一些示例链接 Thanks 假设你想从右边推view2来替换view1 Set up view2 view2 frame view1
  • 缩短 NSString?

    我有一个非常简单的问题 是否有内置方法来缩短字符串 如果没有 有人可以提供一个这样做的例子ObjC 例如 这是一个很长的字符串 应该成为 这是AV 它需要检查字符串是否超过一定数量的字符以及是否被缩短 这非常简单 NSString orig
  • 使用行号进行 SQL 逆透视

    我有一个带有 UNPIVOT 的 SELECT 语句 SELECT dycd acnam dycd dynam dycd value FROM GCATT dbo tblDaycode UNPIVOT dycd value FOR dycd
  • 使用多个外部库时如何避免“重新定义”?

    我有两个库 第三方 并且在每个库中它们都定义了两个具有相同名称的类 在头文件中 Lib A HeaderA h struct mycompare Some code Lib B HeaderB h struct mycompare Same
  • Laravel 未发布到 Redis

    我正在尝试在本地 RESTful API 中实现 Redis 发布 该 API 是在 Laravel 中构建的 以便稍后使用 Web Sockets 实现聊天系统 我打算稍后从 Node JS 服务器读取它们 我在用Redis publis
  • Bamboo - Angular 4 应用程序如何部署

    如何在竹子上部署我的 Angular 4 应用程序 我只是做一个简单的工作 1 git 2 npm install 3 ng build 顺利通过了 但是接下来我应该做什么呢 如何将其部署在服务器上 以便我可以从浏览器进入应用程序 我尝试将
  • 使用索引优化MYSQL数据库[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我正在研究学习商务模拟 http www learnbizsimulations com 一家自筹资金的初创公司 为管理教育领域进行模拟 a 我们的网
  • 应用程序清单文件在 Win 7 环境中导致问题

    我的应用程序已从 net 1 1 升级到 3 5 在 win 7 64 位环境中 我必须手动删除 app exe manifest 文件 否则启动时会崩溃 我使用 Visual Studio 部署和设置项目进行安装 在exe的应用程序设置本
  • 使用 jquery 按值更改/修改下拉列表文本

    我有带有值的下拉列表
  • 如何在 TypeScript 项目中导入节点模块。 ERR_REQUIRE_ESM

    我正在尝试将包 p limit 导入到我的打字稿项目中 当尝试使用运行项目时tsc node serve js 我遇到了下面的错误 我已经被困在这个问题上几个小时了 Error ERR REQUIRE ESM Must use import
  • pm2 可以运行“npm start”脚本吗

    pm2 有没有办法运行 npm start 脚本 或者你只需 要运行pm2 start app js 所以在开发中 npm start 然后在生产中使用 pm2 你会运行类似的东西 pm2 start npm start 有一个等效的方法可
  • android sqlite异常:java.lang.IllegalArgumentException:列'_id'不存在

    我创建了一个包含以下列的 sqlite 数据库 static final String dbName demoDB static final String tableName Employees static final String co
  • MySQL 错误:没有密钥长度的密钥规范

    我有一个主键为 varchar 255 的表 在某些情况下 255 个字符是不够的 我尝试将字段更改为文本 但出现以下错误 BLOB TEXT column message id used in key specification with
  • 如何获取元素的事件监听器

    有没有办法使用 HTML 页面上的 JavaScript 获取该页面上某个元素的所有事件侦听器的列表 注意 我知道我们可以使用 Chrome 开发工具事件侦听器查看它们 但我想使用页面的 JavaScript 来记录 访问查看列表 另外 我
  • 在 WPF 中动态添加网格和控件

    我现在正在制作一个显示系统中硬盘使用情况的应用程序 为此 我想动态生成网格和控件 如进度条和标签 以显示用法 是否有任何 XAML 模板可用于此目的 我使用以下代码在我的代码中动态生成控件 Label drivesLabel Label p
  • Django 表单选择字段的初始值被忽略

    我有这个表格 class UserUsesSourceForm forms Form some fields here username forms CharField label Username max length 30 help t
  • 如何推送到容器上的 git 服务器?

    在我的主机上 我可以创建第二个用户 admin and push使用以下命令到该用户的 git 文件夹 admin localhost folder 当我创建托管 git 服务器的 Docker 容器时 在公开之后port 22我如何git
  • 当 wpf 数据网格单元格中的值使用 MVVM 更改时如何引发事件?

    我需要使用 MVVM 设计模式的 wpf 数据网格方面的帮助 我有一个绑定到可观察集合的 datagid 网格中的第一列包含无法编辑的十进制值 第二列包含一个文本框 必须在其中输入十进制值 第三列必须显示第一列中的值与输入的第二列中的值之间
  • 在 ng-if 中调用 Javascript

    我有一些遗留的 jQuery 代码 这是一大块代码 所以我宁愿稍后再移植它 要使用它 我调用 legacyId legacyFunction 不过 事情是这样的 我有一个 ng if 在 ng if 中 我有 JavaScript 我可以在