Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Call jQuery function from AngularJS Controller

Tags:

I have a below button when on clicked shows a small popup like notification

<button id="element" type="button" onclick="ShowNotifications()" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Text inside popup">Notifications</button>
<script type="text/javascript">
    function ShowNotifications() {
        $('#element').popover('open');
    }
</script>

My Intention is to Show this popup every few seconds without clicking the button, but from the AngularJS Controller.

 var showPop = function () {
    //how can i call that jQuery function here ??
    $timeout(showPop, 1000);
}
$timeout(showPop, 1000);

Tried with the below solution

app.directive("showNotifications", ["$interval", function ($interval) {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {          
            $interval(function () {
                $(elem).popover("open");
                alert('hi');
            }, 1000);
        }
    };
}]);

Also included the scripts

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>


<script src="js/app.js"></script>
<script src="js/postsService.js"></script>   
<script src="js/directive.js"></script>

<script src="js/controllers.js"></script>

using the directive like this

<button id="element" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Friend request 1" **show-notifications**>Live Notifications</button>

I see an error "the object has no method popover"

like image 440
user804401 Avatar asked Mar 28 '14 13:03

user804401


People also ask

Can we use jquery in AngularJS?

Does AngularJS use the jQuery library? Yes, AngularJS can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, AngularJS falls back to its own implementation of the subset of jQuery that we call jQLite.

How do you call a function in AngularJS?

You can call your angularJS function from javascript or jquery with the help of angular. element().


2 Answers

Directives are used for DOM manipulation:

<button show-notifications>

And the directive

.directive("showNotifications", ["$interval", function($interval) {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            //On click
            $(elem).click(function() {
                $(this).popover("open");
            });

            //On interval
            $interval(function() {
                $(elem).popover("open");
            }, 1000);
        }
    }
}]);
like image 166
tymeJV Avatar answered Sep 17 '22 15:09

tymeJV


The following steps can be followed,

var jq = $.noConflict();

then create any regular angular module and controller and create a function inside the controller which we can use it for the calling any jquery function, e.g. I want to add a class to a div element.

angular.module('myApp',[]).controller('hello',function($scope){
            $scope.name = 'Vikash';
            $scope.cities = ['Delhi','Bokaro','Bangalore'];

             $scope.hide = function(){
                jq('#hideme').addClass('hidden');   

            }
        });

and we will create some regular html to utilize that method with the controller.

<body ng-controller="hello">
    <div class="container" id="hideme">
        Hello Dear
    </div>
    <button ng-click="hide()">Hide Hello</button>
</body>

Now here you can see that we are about call addClass method from the jQuery inside the function declared in the controller and part of the $scpe.

like image 29
Vikash Mishra Avatar answered Sep 19 '22 15:09

Vikash Mishra