Can I use a JQuery plugin from within an angularjs

2019-07-21 06:10发布

站内问答 / JavaScript
1103 2 6

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.

2条回答
地球回转人心会变
2楼-- · 2019-07-21 06:42

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.

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
3楼-- · 2019-07-21 06:52

Mixing JQuery and Angular in that way is maybe a little messy, but sometimes you do want to use a well-built component. You could try to find a similar modal in Angular - angular-modal - or you could try and build the component into your Angular directive itself - jQuery Plugins in AngularJS

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)