在 AngularJS 中集成 jQuery 插件的正确方法

2024-03-20

我想知道将 jQuery 插件集成到我的 Angular 应用程序中的正确方法是什么。我找到了几个教程和截屏视频,但它们似乎适合特定的插件。

例如:http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs http://www.youtube.com/watch?v=8ozyXwLzFYs

我应该创建一个像这样的指令 -

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
}); 

然后在html中调用脚本和指令?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

在此先感谢


是的,你是对的。如果您使用 jQuery 插件,请勿将代码放入控制器中。相反,创建一个指令并将通常的代码放入link该指令的功能。

文档中有几点您可以查看。您可以在这里找到它们:
常见陷阱 https://docs.angularjs.org/misc/faq#common-pitfalls

正确使用控制器 http://docs.angularjs.org/guide/controller#using-controllers-correctly

确保在视图中引用脚本时,最后引用它 - 在引用 angularjs 库、控制器、服务和过滤器之后。

编辑:而不是使用$(element),你可以利用angular.element(element)当将 AngularJS 与 jQuery 结合使用时

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

在 AngularJS 中集成 jQuery 插件的正确方法 的相关文章

  • Angular JSON 与 JSONP $promise

    如果我从我的controller js进行这个JSON调用 scope userInvestors userInvestors query UserID scope user uid function userInvestors conso
  • 如何使用 Angular/Ionic/JS 显示 Motion JPEG 二进制数据流?

    我正在为设备编写应用程序 此类设备将收到 POST 请求 并发回multipart x mixed replace二进制数据流 我必须在我的应用程序主页的一部分上显示此类流 我查了一下 这种情况的资源非常有限 到目前为止 我发现如果 Mot
  • 从 Angularjs 应用程序中的 iOS Webview 调用 Javascript 函数

    我的问题是 当我尝试从 UIWebView 中调用 AngularJS 应用程序中存在的 javascript 函数时 该函数无法识别 当我在典型的 html 结构中调用该函数时 该函数会按预期被识别 下面提供的示例 目标 C void v
  • 自定义指令模型在 ng-switch 中不起作用

    我试图使用 AngularJS 提供一个可切换的下拉列表 其中选择各种选项将触发不同的列表 ng switch似乎是正确的方法 但我的ng model在内部时不具有约束力ng switch 如果我不使用 绑定工作正常ng switch 但如
  • 在 Electron/angularjs 应用程序中访问 TFS 和 Visualstudio 在线 REST Api

    使用 angularjs 在 Electron 中在线集成 TFS 和 Visual Studio 的最佳方法是什么 用户可以提供服务器的用户名 密码和 URL 我想要获取项目 任务 在状态之间移动任务 创建新项目等 我有一个使用 Angu
  • AngularJS'无法读取未定义的'then'属性'

    我遇到这个问题 当我单击登录按钮时 chrome 控制台会记录以下内容 angular min js 117 TypeError 无法读取未定义的属性 then 在 m scope logIn loginModuleController j
  • 从字符串开头过滤 ng-repeat 元素

    我正在尝试 AngularJS 这是我的第一次尝试 我正在尝试使用 开头为 而不是 包含 之类的内容来过滤对象数组 但我不明白如何做到这一点 假设我有一个elements像这样的数组 amount 50 amount 25 如果我想过滤5两
  • 如何将 ng-repeat 与图像映射区域标签一起使用?

    我正在尝试使用 AngularJS 创建可点击的汽车配置文件 一旦我将区域标签属性移动到 auto parts json 并将它们与 ng repeat 中的适当属性绑定 那么它就无法工作 如何修复它 请在全页预览中测试元素 var app
  • AngularJS:在任何部分页面控制器之前调用特定函数

    我想调用一个特定的函数 GetSession 在我的应用程序加载开始时 这个函数使 http调用并获取会话令牌 GlobalSessionToken从服务器 然后 该会话令牌用于其他控制器逻辑并从服务器获取数据 我已经打电话给这个GetSe
  • 什么是“更便宜”的性能明智的 $broadcast 或 $watch

    我的应用程序中有一种情况 每次用户的角色发生变化时 我都需要重新加载菜单 一个用户可以在多个公司中拥有角色 我想知道解决这个问题的最佳方法是什么 目前我正在做以下事情 app controller menuLoadingCtrl funct
  • 页面刷新后如何注销用户?

    我正在跟进谷歌的指南 https developers google com identity sign in web sign in sign out a user注销用户 考虑到gapi auth2刷新页面后将是未定义的 我正在做 if
  • 如何从 angularJS 模板调用encodeURIComponent?

    我的 Angular JS 模板中有一个块 a href foos foo id foo name a 但是 foo id 属性有时可能包含时髦字符 我想做这样的事情 a href foos encodeURIComponent foo i
  • 将 AngularJS 应用程序部署到普通 Apache HTTP 服务器是一种常见的选择吗?

    我很好奇 AngularJS 应用程序通常部署到什么样的服务器上 Google 没有给出令人满意的答案 特别是 在我看来 AngularJS 应用程序只是静态文件的集合 因此在生产中将这样的应用程序部署到普通 Apache HTTP 服务器
  • 如何更新状态变更指令

    我有一个根状态 它定义了 Angular 模板的整体结构 在根状态下 我包含侧边栏 其中通过根据状态更改的指令具有动态菜单 像这样 state root abstract true url root templateUrl views ro
  • 使用 AngularJS 将图像上传到 Firebase

    我有一个处理 剧集 的服务 创建 删除和更新它们 它看起来像这样 app service Episode firebase FIREBASE URL function firebase FIREBASE URL var ref new Fi
  • 使用 Bower 添加 ui.bootstrap 依赖项

    我正在尝试将 ui bootstrap 依赖项添加到我的角度项目中 我正在使用 yeoman bower 我这样做了 哟有角 Bower 安装 Angular UI 然后我添加到我的 index html 文件中 和 咕噜发球 然后我将 u
  • 单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁”

    我遇到了导航栏问题 当您单击菜单外部以关闭菜单时 导航栏会出现 闪烁 如果在单击菜单外时按住鼠标 则闪烁会持续存在 如下所示 我认为这可能与角度有关 而不是与CSS有关 主要是因为其他人未能在小提琴上复制它 上一个问题在这里 https s
  • Chart.js 没有显示在我的视图中

    我有一个使用 angular js 运行的应用程序 我的视图之一应该加载图表 我正在使用 Chart js 但由于某种原因它不起作用 并且我的控制台上没有显示错误 这是我创建图表的函数 scope writeBatteryChart fun
  • Angular JS - 提交到 $http 时日期发生变化 - 时区问题

    我遇到一个奇怪的问题Date当它通过 http put 传递到 API 时发生变化 我怀疑时区问题 Datepicker 触发 ng change 事件 console log Tue Jun 10 2014 00 00 00 GMT 01
  • Angular - 将焦点放在动态创建的输入字段上

    我如何将焦点添加到新创建的字段 参见到目前为止的示例 http jsfiddle net aERwc 165 http jsfiddle net aERwc 165 scope addField function console log h

随机推荐