我可以在angularjs指令中使用jQuery插件的？ [英] Can I use a JQuery plugin from within an angularjs directive?
问题描述
我一般很新的JavaScript。我花了过去几周的建设有Angular.js前端。
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>
请注意JavaScript函数底部调用一个模式对话框，使用的本教程。
Note the javascript function to call a modal box at the bottom, using this tutorial.
我花了几天来尝试不同的教程，让情态动词在我的web应用程序的工作，但没有成功。我认为这是到我缺乏角度和Javascript一般的理解。结果
在任何情况下，我已经成功地得到这个教程使用jQuery工作，当我点击链接，打开模态预期。
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.
不过，我不想从这里调用这个模式。我想从已嵌入的＆LT内的指令调用它; installationsite-板＆GT; 指令在上面的code，它看起来像这样（只是一个单一的部分中所示这里）：
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>
该指令＆LT;设备列表服务＆GT; 显示，像这样的项目清单：
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?
是否有可能，或者我需要放弃我的JQuery模态做的折角方式，这并没有为我工作在过去几年的尝试。
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.
推荐答案
不要使用jQuery情态动词。你可以，但你不应该。
Don't use jquery modals. You can, but you shouldn't.
相反，我建议使用UI角，其中有一个pretty可用模式实施： https://angular-ui.github.io/
Instead, I recommend using Angular UI, which has a pretty usable modal implementation: https://angular-ui.github.io/
第二个选择：如果你不喜欢角UI，然后用AngularJS +引导，并创建自己的自定义指令
Second alternative: if you don't like Angular UI, then use AngularJS + Bootstrap, and create your own custom directives
第三种选择：使用jQuery
Third alternative: Use jQuery.
如果你还愿意去与第3选择，尽管我反对的意见，那么这里是你如何做到这一点：
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);
}
};
});
用法：
<div modal></div>
在这里需要解释一下。
Some explanation is needed here.
为什么$超时服务的必要吗？ jQuery插件经常要求以正常工作满载了DOM。这就是为什么大多数的jQuery插件被包裹一个$（文件）。就绪块内。在AngularJS没有DOM准备的概念，并且在AngularJS没有简单的方法挂钩到该事件。然而，有一个公知的工具，它是使用$超时服务。在角有三个阶段：
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
使用链接函数内$超时排队，直到之后的电流闭合完成执行将要执行的$超时功能。它只是恰巧，呈现阶段执行目前关闭的范围之内。因此，当DOM已经加载了$超时功能会呈现阶段之后执行。
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屋！
