- 首页
- 前端开发
- 我可以在 angularjs 指令中使用 JQuery 插件吗?
我可以在 angularjs 指令中使用 JQuery 插件吗?
[英] Can I use a JQuery plugin from within an angularjs directive?
本文介绍了我可以在 angularjs 指令中使用 JQuery 插件吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
总的来说，我对 javascript 还是很陌生.过去几周我一直在用 Angular.js 构建一个前端.
我在我的页面上定义了许多指令，Angular 在这方面做得很好.
这是我的主页的样子:
<sidebar-menu ng-controller="PanelController 作为面板"></sidebar-menu><div id="内容" ><div><div class="list-group"><div class="list-group-item" ng-repeat="overview.sites 中的站点" ng-click=""><div class="item-heading"><h3>{{site.name}}</h3><p>地址:{{site.address}}</p><a href="#" class="paulund_modal">点击这里</a>
<installationsite-panels ng-controller="PanelController 作为面板"></installationsite-panels>
<脚本>$(document).ready(function(){$('.paulund_modal').paulund_modal_box();});
注意在底部调用模态框的 javascript 函数，使用 本教程.
过去几天我一直在尝试不同的教程来让模态在我的 web 应用程序中工作，但没有成功.我认为这是因为我对 Angular 和 Javascript 缺乏了解.
无论如何，我已经设法使用 JQuery 使本教程工作，并且当我单击链接时，模态会按预期打开.
但是，我不想从这里调用这个模式.我想从嵌入在上述代码中的 <installationsite-panels> 指令中的指令调用它，如下所示(此处仅显示一个部分):
设备状态
<div class="device-icon-group"><div class="device-type1-icons" ng-click="panel.showDevices(3)" ng-show="showtype1Red"><img src="img/type1red.png" style="width:50%；高度:50%；"/></div><div class="device-type2-icons" ng-click="panel.showDevices(3)" ng-show="showType2Red"><img src="img/type2red.png" style="width:50%；高度:50%；"/></div>
<div class="service" ng-click="panel.showDevices(3)" ng-show="showService"><b>{{panel.getServiceDeviceCount()}} 设备需要维修</b>
<div ng-show="showServiceList"><设备列表服务></设备列表服务>
指令
<div ng-controller="DevicesController as deviceList" font-size:1em ><div id="设备列表组"><div id="device-list-group-item" ng-click="" ng-repeat="deviceList.devicesService 中的设备"><div ng-class="device.status"><img src="{{(device.type == 'type1') ? 'img/type1white.png' : 'img/type2white.png'}}><div class="device-params"><b>ID:</b>{{device.id}}
<b>类型:</b>{{设备类型}}
<div class="device-params"><b>位置:</b>{{device.location}}
<b>动作:</b>{{device.action}} <br/>
我想在用户单击 list-group-item 之一时显示模式，并显示与该项目相关的一些数据.
模式在主应用程序的顶层工作正常，但我无法从任何指令中调用它.我怎样才能做到这一点?
是否有可能，或者我是否需要废弃我的 JQuery 模式并以 Angular 方式进行操作，这在过去的几次尝试中对我不起作用.
解决方案
不要使用 jquery modals.你可以，但你不应该.
相反，我建议使用 Angular UI，它有一个非常有用的modal实现:https://angular-ui.github.io/
第二种选择:如果你不喜欢 Angular UI，那么使用 AngularJS + Bootstrap，并创建你自己的自定义指令
第三种选择:使用 jQuery.
如果你仍然想采用第三种选择，尽管我反对它，那么你可以这样做:
var app = angular.module('app', []);app.directive('modal', function($http, $timeout) {返回 {限制:'A'，链接:函数(范围，元素，属性){$超时(功能(){element.paulund_modal_box();}, 0, 假);}};});
用法:
这里需要一些解释.
为什么需要 $timeout 服务?jQuery 插件通常需要完全加载 DOM 才能正常工作.这就是为什么大多数 jQuery 插件都包含在 $(document).ready 块中的原因.在 AngularJS 中没有准备好 DOM 的概念，在 AngularJS 中也没有简单的方法来挂钩事件.但是，有一个众所周知的hack，就是使用$timeout 服务.在 Angular 中，分为三个阶段:
1. compile - Angular 在 DOM 树中寻找指令2. 链接 - Angular 为每个指令调用链接函数来设置监视处理程序.3. Render - Angular 更新视图
在 Link 函数中使用 $timeout 将要执行的 $timeout 函数排队，直到当前闭包执行完毕.Render 阶段恰好在当前闭包的执行范围内.因此，$timeout 函数将在渲染阶段之后执行，当 DOM 已加载时.
I'm quite new to javascript in general. I've spent the past couple of weeks building a front end with Angular.js.
I have a number of directives I've defined that sit on my page, Angular has been great for this.
Here's what my main page looks like:
<body class="body" ng-controller="OverviewController as overview" font-size:1em>
<sidebar-menu ng-controller="PanelController as panel"></sidebar-menu>
<div id="content" >
<div>
<div class="list-group">
<div class="list-group-item" ng-repeat="site in overview.sites" ng-click="">
<div class="item-heading">
<h3>{{site.name}}</h3>
<p>Address: {{site.address}}</p>
<a href="#" class="paulund_modal">Click Here</a>
</div>
<installationsite-panels ng-controller="PanelController as panel"></installationsite-panels>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.paulund_modal').paulund_modal_box();
});
</script>
</body>
Note the javascript function to call a modal box at the bottom, using this tutorial.
I've spent the past few days trying different tutorials to get modals to work in my webapp, but with no success. I think it's down to my lack of understanding of Angular and Javascript in general.
In any case, I've managed to get this tutorial to work using JQuery, and when I click on the link, the modal opens as expected.
However, I don't want to call this modal from here. I want to call it from a directive that's embedded within the <installationsite-panels> directive in the above code, which looks like this (just a single section shown here):
Device Statuses
<div>
<div class="device-icon-group">
<div class="device-type1-icons" ng-click="panel.showDevices(3)" ng-show="showtype1Red"><img src="img/type1red.png" style="width:50%; height:50%;"/></div>
<div class="device-type2-icons" ng-click="panel.showDevices(3)" ng-show="showType2Red"><img src="img/type2red.png" style="width:50%; height:50%;" /></div>
</div>
<div class="service" ng-click="panel.showDevices(3)" ng-show="showService">
<b>{{panel.getServiceDeviceCount()}} device needs servicing</b>
</div>
<div ng-show="showServiceList">
<device-list-service></device-list-service>
</div>
</div>
The directive <device-list-service> shows a list of items like so:
<div ng-controller="DevicesController as deviceList" font-size:1em >
<div id="device-list-group">
<div id="device-list-group-item" ng-click="" ng-repeat="device in deviceList.devicesService">
<div ng-class="device.status"><img src="{{(device.type == 'type1') ? 'img/type1white.png' : 'img/type2white.png'}}"> </div>
<div class="device-params">
<b>ID: </b> {{device.id}}<br />
<b>Type: </b> {{device.type}}
</div>
<div class="device-params">
<b>Location: </b> {{device.location}}<br />
<b>Action: </b> {{device.action}} <br />
</div>
</div>
</div>
</div>
I want to show the modal when the user clicks on one of the list-group-item 's, and display some data relating to that item.
The modal works fine from the top level in the main app, but I cannot call it from within any of the directives. How can I do this?
Is it possible, or do I need to scrap my JQuery modal and do it the Angular way, which hasn't worked for me for the past few attempts.
解决方案
Don't use jquery modals. You can, but you shouldn't.
Instead, I recommend using Angular UI, which has a pretty usable modal implementation: https://angular-ui.github.io/
Second alternative: if you don't like Angular UI, then use AngularJS + Bootstrap, and create your own custom directives
Third alternative: Use jQuery.
If you still want to go with the 3rd alternative, despite my advice against it, then here is how you do it:
var app = angular.module('app', []);
app.directive('modal', function($http, $timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
$timeout(function() {
element.paulund_modal_box();
}, 0, false);
}
};
});
Usage:
<div modal></div>
Some explanation is needed here.
Why is the $timeout service necessary? jQuery plugins often require the DOM to be fully loaded in order to work properly. That is why most jQuery plugins are wrapped inside of a $(document).ready block. In AngularJS there is no concept of DOM ready, and there is no easy way in AngularJS to hook into the event. However, there is a well-known hack, which is to use the $timeout service. In Angular there are three phases:
1. compile - Angular walks the DOM tree looking for directives
2. Link - Angular calls the link function for each directive to setup watch handlers.
3. Render - Angular updates the views
Using $timeout within the Link function queues the $timeout function to be executed until after the current closure is done executing. It just so happens that the Render phase is within the current closure's scope of execution. Hence, the $timeout function will execute after the render phase, when the DOM has been loaded.
这篇关于我可以在 angularjs 指令中使用 JQuery 插件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
