Menu
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"
440
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.
You can call your angularJS function from javascript or jquery with the help of angular. element().
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);
}
}
}]);
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
