I have a pretty specific problem. Recently I figured out how to add a close button to an AngularUI popover. Originally the user had to click on the popover parent to open and to close it, so I had functionality added in that changed the style of that element on a click event. With the addition of the close button, I want to simulate the same effect when the user clicks it. I set up a plnkr here to play with.
So far I've tried to add ng-click="toggle(); style=!style" in the popover template, but that didn't work. I think that I have to access the style variable in the popoverToggle directive, but I don't know how to do that. It might also just be possible to manipulate it in the HTML.
Popover template
<div><span ng-click="toggle()">X</span></div>
<p>content</p>
popoverToggle.js
angular.module('app')
.config(function($tooltipProvider) {
$tooltipProvider.setTriggers({'open': 'close'});
})
.directive('popoverToggle', function($timeout) {
return {
scope: true,
link: function(scope, element, attrs) {
scope.toggle = function() {
$timeout(function() {
element.triggerHandler(scope.openned ? 'close' : 'open');
scope.openned = !scope.openned;
scope.style = !scope.style; // doesn't do anything either
});
};
return element.on('click', scope.toggle);
}
};
});
index.html
<span ng-class="{'border-gray': style}" style="margin: 40px" ng-click="style=!style" class="red-btn">
<span popover-placement="bottom" popover-template="'popover-template.html'"
popover-trigger="open" popover-append-to-body="true" popover-toggle>click me</span>
</span>
The solution is very straightforward, all that needs to be changed is the style variable. Simply change it to $scope.style, like so:
popover-template.html
<div><span ng-click="toggle(); $scope.style=!$scope.style">X</span></div>
<p>content</p>
index.html
<span ng-class="{'border-gray': $scope.style}" style="margin: 40px" ng-click="$scope.style=!$scope.style" class="red-btn">
<span popover-placement="bottom" popover-template="'popover-template.html'"
popover-trigger="open" popover-append-to-body="true" popover-toggle>click me</span>
</span>
Related
I have a single page application with angular.js. The other parts are working but I could not run the rollover.
This is my controller. I am going to use on this controller.
angular.module('foodDeliveryApp')
.controller('RestaurantListController', restaurantListController);
function restaurantListController($scope,$sce, DataService, $rootScope, $location, $timeout) {
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">hover on me as well</b>');
$scope.hovered = function(hovering){
$timeout(function() {
console.log('update with timeout fired');
if(hovering.objHovered==true){
hovering.popoverOpened2=true;
}
}, 500);
}
}
The above part is popover function.
There are a lot function for the other functionality but is not important.
<span ng-init="popoverOpened1=false" ng-mouseover="popoverOpened1=true" ng-mouseleave="popoverOpened1=false">
<button class="btn btn-default" uib-popover-html="htmlPopover"
popover-trigger="none" popover-placement="bottom-left" popover-is-open="popoverOpened1" >
<span>hover me</span>
</button>
</span>
This is the HTML part in HTML which is controlling by the same controller.
Is anyone know how can I show a popover without jquery?
i am quite new with this delegate thing for dynamic elements. so today i tested again with a generated dynamic template from some example in stackover for popover.
here is my dynamic html content.
<a id="testpop" class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
and then, i have this script on my js
$('#resultContent').on('click','#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
resultContent is the div here where i add .html all my html codes.
i manage to attached the delegate event (i think) but is acting strange as my 1st click on the testpop button, the popover won't show. Until i press the 2nd and 3rd time only it will pop up. Am i doing this delegating wrong?
credits for this test code: HTML inside Twitter Bootstrap popover
You forgot to add a trigger in the popover options. The data-trigger in the element doesn't do too much when you really only initialize the popover() once you click the element. In fact, your JS code would propably work better like so:
$("[data-toggle=popover]").popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
EDIT
Popover should generally be initialized on page load:
$("[data-toggle=popover]").popover();
Putting it inside a click event will not enable popover on the element until you click it first.
Removing the click event from your original JS code should enable it on page load.
If however, the element you mean to attach the popover to is dynamically added to the DOM after page load, you should reinitalize the popover after adding it.
Wrapping the popover in a function would make that much easier.
function addPopover(selector){
$(selector).popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
}
And whenever you add an element to the page that should have a popover, you simply call the function, with a selector for the element. Example for the element you have in your code:
addPopover("[data-toggle=popover]");
In your code, you are configuring the popover on click event of the button.
So, this is how it happens.
Click the anchor link
Initialize the popover with options. (This doesnt mean it displays the popover, it is just a initialization)
Click on the popover again (Popover is already bound because of the earlier call and then it shows)
Also, you need to ensure the popover is not bound to the element again and again to avoid repeated popover bindings.
$('#resultContent').on('click', '#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
}).popover('show');
// Explicitly show the popover.
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="resultContent">
<a id="testpop" class="btn btn-primary" data-placement="bottom" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
</div>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
I am currently using an angular directive to alert the user of unsaved changes if they try to close the tab or browser. Now, I want to add a condition to that directive where if it is a url change within the site, to trigger a custom modal. Is it possible to store the code for this modal in the directive template so that I don't have to copy it to the bottom of each view? Here is my directive so far:
.directive('confirmOnExit', function() {
return {
restrict: "E",
link: function($scope, elem, attrs) {
window.onbeforeunload = function(){
if ($scope.currentForm.$dirty) {
return "You have unsaved changes, are you sure you want to leave the page?";
}
}
$scope.$on('$stateChangeStart', function(event, next, current) {
if ($scope.currentForm.$dirty) {
$scope.showModal = true;
}
});
},
template: "<div id='myModal' class='modal-background' ng-show='showModal'>
<div class='modal-window'>
<div class='modal-text-container'>
<div class='modal-text'>You have unsaved changes. Do you still want to continue?</div>
</div>
<div class='btn-container btn-group'>
<button type='button' class='btn btn-teal' ng-click='yes()'>Yes</button>
<button type='button' class='btn btn-blue' ng-click='no()'>No</button>
</div>
</div>
</div>"
};
})
And the HTML:
<form name="currentForm" ng-model="currentForm" confirm-on-exit>
<input type="text" ng-model="input1" />
<input type="text" ng-model="input2" />
<input type="text" ng-model="input3" />
<input type="text" ng-model="input4" />
<input type="submit" ng-click="saveChanges()" />
</form>
I would suggest you to not store the code in the directive. There are multiple ways to achieve it and the here is the cleaner way of achieving this.
Define a global controller either in <html>, or <body> tag so that it's scope is available throughout your app and do the following in that global controller:
myApp.controller("GlobalController", function($scope) {
// Avoid scope inheritance problem
$scope.globalData = {}
$scope.showMyModal = function () {
$scope.globalData.showModal = true;
}
$scope.hideMyModal = function () {
$scope.globalData.showModal = false;
}
});
Now in your main HTML (like index.html), put the controller and that template:
<body data-ng-controller="GlobalController">
<!-- other content -->
<div id='myModal' class='modal-background' ng-show='globalData.showModal'>
<div class='modal-window'>
<div class='modal-text-container'>
<div class='modal-text'>You have unsaved changes. Do you still want to continue?</div>
</div>
<div class='btn-container btn-group'>
<button type='button' class='btn btn-teal' ng-click='yes()'>Yes</button>
<button type='button' class='btn btn-blue' ng-click='no()'>No</button>
</div>
</div>
</div>
</body>
And there is two problems with your directive. Modified directive looks like:
myApp.directive('confirmOnExit', function() {
return {
restrict: "A",
link: function ($scope, elem, attrs) {
window.onbeforeunload = function () {
if ($scope.currentForm.$dirty) {
return "You have unsaved changes, are you sure you want to leave the page?";
}
};
$scope.$on('$stateChangeStart', function (event, next, current) {
if ($scope.currentForm.$dirty) {
$scope.showMyModal();
event.preventDefault(); // this is required
}
});
}
}
});
The first problem was that you have to use restrict: 'A' since you are using the directive as attribute directive and you have to mention event.preventDefault(); otherwise your state navigation will not be prevented.
Now, we are calling that showMyModal method in the directive and that will be accessible since the directive's scope will inherit it's parent scope and so on.
The another way you could achieve the same using $on and $broadcast to pass the message.
I've read Angular UI Bootstrap adding a close button and show hidden div on ng-click within ng-repeat. I'd like to use the solution from the latter article and apply it to the problem stated in the first article. In essence, I want to be able to close an Angular UI Bootstrap popover with ng-show or ng-click.
I have an example piece of code to illustrate this. This code just applies a CSS class to a particular element whenever it is clicked, and removes it when it is clicked again:
<div ng-class="{'gray-inset-border': style}">
<div ng-click="style=!style"></div>
</div>
Whenever an element containing a popover is clicked, a popover template is created. In the Chrome DOM inspector, the opening tag looks like this:
<div class="popover ng-isolate-scope right fade in"
tooltip-animation-class="fade" tooltip-classes=""
ng-class="{ in: isOpen() }" popover-template-popup="" title=""
content-exp="contentExp()" placement="right" popup-class="" animation="animation"
is-open="isOpen" origin-scope="origScope"
style="top: 317.5px; left: 541.8125px; display: block;">
Notice the ng-class="{in: isOpen()}". I am assuming that this controls whether the popover is open or not, and want to use the same ng-click method as in the example above, and apply it to a button within the popover. However, when I tried that, it didn't work. I also can't find the popover template anywhere in the ui-bootstrap-tpls.js code. As far as I know, popover creation is voodoo magic.
It's also frustrating that Angular UI Bootstrap doesn't have this functionality already. I've been trying to solve this problem off and on for over a week now, and every "solution" I have seen doesn't seem to work for me.
Am I understanding the ng-class="{in: isOpen()}" correctly? Where do I edit the popover template to add a close button?
This was solved by #ognus on a GitHub thread.
He stated:
I've found that using a simple custom directive worked best for my use case. I just want to be able to close the popover from within the popover template.
The directive exposes scope.toggle method that user custom trigger to open and close popover. I'm then using this method in the popover template.
There is a plnkr that I adapted to test my own issue. The solution involved creating a directive (of course).
HTML
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.x" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="ui-bootstrap#0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="popoverToggle.js"></script>
<script src="script.js"></script>
</head>
<body style="margin: 50px">
<!-- Show popover link -->
<a
href=""
popover-placement="bottom"
popover-trigger="open"
popover="Lorem ipsum dolor sit amet, consectetur."
popover-title="This is a title"
popover-toggle>
Show popover</a>
<div popover-placement="bottom" popover-trigger="open"
popover-template="'popover-template.html'" popover-toggle>Show Popover 2</div>
</body>
</html>
popoverToggle directive
angular.module('main')
.config(function($tooltipProvider) {
$tooltipProvider.setTriggers({'open': 'close'});
})
.directive('popoverToggle', function($timeout) {
return {
scope: true,
link: function(scope, element, attrs) {
scope.toggle = function() {
$timeout(function() {
element.triggerHandler(scope.openned ? 'close' : 'open');
scope.openned = !scope.openned;
});
};
return element.on('click', scope.toggle);
}
};
});
Popover template
<p>Are you sure you want to remove this item?</p>
<a href='' ng-click='remove(item)'>Yes</a>
<div ng-click='toggle()'>No</div>
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'dataCtrl', function() {
var self = this;
self.data = [
{name: "one", num: 23},
{name: "two", num: 87},
{name: "three", num: 283}
]
return self;
}
)
app.controller(
'myPopoverCtrl', ['$scope',
function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: function open( value ) {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = "(" + value.num + ")";
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
<body ng-app="ui.bootstrap.demo" class='container'>
<div ng-controller='dataCtrl as dc' >
<li ng-repeat="d in dc.data">
{{d.name}}
<a ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="right"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open(d)">
pop
</a>
</li>
</div>
<script
type="text/ng-template"
id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data"/>
<button
class="btn btn-success"
ng-click="myPopover.close()">Close me!</button>
</script>
</body>
Link to the working example
This is solution using another controller for the popover.
this controller opens and closes the popover.
you can also write the directive instead of controller.
Its works fine if data is in repeat.
I am new to Angularjs. I've tried a example in here.
file index.html:
<div ng-repeat="data in ctl.dataList">
<div class="col-md-6">
<textarea type="text" ng-mouseover="ctl.mouseOverFunc()" ng-mouseleave="ctl.mouseLeaveFunc()">{{data.value}}</textarea>
<button ng-show="ctl.showCloseBtn">X</button>
</div>
</div>
file app.js:
app.controller('FocusController', function() {
this.showCloseBtn = false;
this.dataList = [{
value: "one"
}, {
value: "two"
}];
this.mouseOverFunc = function() {
this.showCloseBtn = true;
};
this.mouseLeaveFunc = function() {
this.showCloseBtn = false;
};
});
I want to show close button when mouse overed every textarea like facebook chat in this picture. But my issues is when mouse over one of textarea then all X button was showed.
How do i assign dynamic controller to every textarea or how to do like facebook chat ?
Thanks for your help
You can do with CSS as well as AngularJS. I suggest you to do with CSS which is Simple. And Do your ng-click on the button.
This Plunker Demo is using with CSS and added ng-click there. Please check the styles and classes added.
Styles
<style>
.field:hover .btn-close {
display:block;
}
.btn-close {
display:none;
}
</style>
HTML
<div ng-repeat="data in ctl.dataList">
<div class="col-md-7 field">
<textarea></textarea>
<button ng-click="doSomething()" class="btn-close">X</button>
</div>
</div>
This Plunker Demo is with AngilarJS as explained in the other answer by New Dev.
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea></textarea>
<button ng-click="doSomething()" ng-show="data.showX">X</button>
</div>
Typically, it would be best to create a directive for this functionality and encapsulate all the logic of clicking the "x" button, but for simplicity you could also leverage the child scope created by ng-repeat, and do the following:
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea type="text"></textarea>
<button ng-show="data.showX" ng-click="ctl.close(data)">X</button>
</div>
</div>
ng-repeat="item in items" creates a child scope for each item, so you can set values on the child scope.
Here's your modified plunker
EDIT:
As suggested in the comments, if you have nothing more complex than showing or hiding the button, definitely CSS approach is the simplest way to go. Use the above example then as an illustration for how scopes work.