current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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"

share|improve this question
2  
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 Mar 28 '14 at 13:32

1 Answer 1

up vote 9 down vote accepted

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);
        }
    }
}]);
share|improve this answer
    
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. –  Joe Minichino Mar 28 '14 at 13:37
    
@JoeMinichino -- Updated to show on click and interval –  tymeJV Mar 28 '14 at 13:43
    
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 –  user804401 Mar 30 '14 at 7:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.