Call jQuery function from AngularJS Controller

Question

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"

this type of stuff deserves a directive. Don't put ui logic in your controller. Also, no need for a recursive call, angular now supports $interval. — Joe Minichino
– Joe Minichino, Commented Mar 28, 2014 at 13:32

tymeJV · Accepted Answer · 2014-03-28 13:43:21Z

29

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);
        }
    }
}]);

edited Mar 28, 2014 at 13:43

answered Mar 28, 2014 at 13:36

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joe Minichino Over a year ago

I upvoted this, I will expand by saying that the body of link should call a $interval(showPopup, 1000), which is really what the question is about.

tymeJV Over a year ago

@JoeMinichino -- Updated to show on click and interval

user804401 Over a year ago

I tried the code and i see on error "The object has no method popover" If i put an alert i am able to see the alert. I have also included all the scripts, i have modified the code, pls look above

Vikash Mishra · Accepted Answer · 2015-10-17 21:23:58Z

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.

This is great. You can also write out the jQuery instead of using noConflict, so it would look like this: jQuery('#hideme').addClass('hidden');

Thakhani Tharage · Accepted Answer · 2015-03-22 11:56:10Z

12

Instead of a $ just place the key word angular

angular.element("#id").val()

answered Mar 22, 2015 at 11:56

Thakhani Tharage

1,29817 silver badges19 bronze badges

2 Comments

Bhawna Malhotra Over a year ago

i want to use something like this angular.element("#btn").click(function (event) {alert("hi");}); but jqLite does not support click method....what can be the other options.Please suggest.

Thakhani Tharage Over a year ago

There is no need to use JQuery for that use ng-click="yourFunction()" where yourFunction() is defined in the controller like <br/> $scope.yourFunction= function() { alert("hi"); };

Collectives™ on Stack Overflow

Call jQuery function from AngularJS Controller

3 Answers 3

3 Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Linked

Related