I am working on a UI task to display a popover when i click on a link. Once i click outside the popover, it will close. But while clicking on the link i am adding CSS styles to the link. When the popover is closed i want the applied css to be removed from the link. Any suggestions
code:
<div class="popover-border" uib-popover-template="'template.html'" popover-
placement="bottom" popover-trigger="'outsideClick'" popover-class="test-
popover">
Template for the popover content
<script type="text/ng-template" id="template.html">
<h1> Hello</h1>
</script>
Try changing:
popover-trigger="'outsideClick'"
to:
popover-trigger="outsideClick"
Working example is here
Related
I'm trying to use UI Bootstrap's modal dialog, inside an Angular controller, rendered inside an Asp MVC View.
Somewhere within the page, I embed modal div :
<div class="modal inmodal" id="newActivityModal" tabindex="-1" role="dialog" aria-hidden="true">
which is triggered by:
<button ng-disabled="vm.activityInputText.length == 0" type="submit" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#newActivityModal">
So the structure of the page is :
<!-- ng-module="xxx" -->
...
<!-- ng-controller="zzz" -->
...
<!-- button triggering modal -->
....
<!-- modal -->
The problem however is that when the page renders, the modal window div 'jumps out' of the div where it originaly was (inside the controller) and appears at the very bottom of the page, right before the body tag.
Since inside the modal I'm using {{}} bound to controller's scope, it breaks.
Am I doint this right ?
Funny fact : if I instead put this all (the controller, button, modal window etc.) inside an <ng-view> it works fine and modal stays where it was in the DOM.
I'm loading a modal window into my html using magnific popup, which is essentially doing this:
<html ng-app='basket'>
<body ng-controller='BasketController as basket'>
<a id='open' href='/product/1'>Open modal</a>
<a ng-click='addToCart(1)'>Add to cart</a>
</body>
</html>
... After Ajax load
<html ng-app='basket'>
<body ng-controller='BasketController as basket'>
<div class='modal>
<h1>Product title</h1>
<a ng-click='addToCart(1)'>Add to cart</a>
</div>
<a id='open' href='/product/1'>Open modal</a>
<a ng-click='addToCart(1)'>Add to cart</a>
</body>
</html>
But the ng-click inside the modal doesn't fire. Is there a way I can refresh the scope with the modal content included?
To begin with, I thought I'd give it a go by adding an ng-click to the open modal button that can pass the scope to another function that opens the modal. I have a function that can console log the $scope after it has loaded, but I just need to refresh or something to make angular recognise the new html in the modal window.
The reason this doesn't work is because angularJS is not aware of the ng-click inside the modal. It was added by jQuery by the looks of it. AngularJS has not processed that HTMl and the ng-click does nothing.
You can, however, potentially use the $compile function in AngularJS to $compile the modal HTML with a particular scope. Then, the ng-click will work.
Have a read about $compile here:
https://docs.angularjs.org/api/ng/service/$compile
So an example in your case might be:
$compile(modalElement)($scope);
Where this happens inside BasketController, so that would be BasketController passed in to manage modalElement - the raw DOM element, not the jQuery element.
So at some point if you have access to the modal html (just after load) you could do that. Not recommended at all though! Use an Angular library.
I have something like this:
http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview
What I would like to do is closing the popover window after clicking somewhere outside. I know that there were similar questions but I would like to know how to do that in Angular. Problem is, my popover is located inside script tag.
<script type="text/ng-template" id="templateId.html">
This is the content of the template {{name}}
</script>
In bootstrap's documentation they have an example of a 'dismissable' popover.
The trick is to add trigger: 'focus' to your popover options. You then need to change your element to a 'focusable' element (in this example i have used a button)
Here is my fork of your example.
PS. it is worth mentioning that not all elements are natively 'focusable'. You can make sure that an element can become focusable, but adding the attribute tabindex (eg. tabindex="-1").
Looks like I have found an answer to my question. All we need to do is to apply this solution: How to dismiss a Twitter Bootstrap popover by clicking outside? to directive responsible for showing popover. What's more, we need to add data-toggle="popover" to our button.
And, surprisingly, it works very well.
If you want it to work seamlessly on any kind of elements without having to use any external code nor weird things, all you have to do is add this 2 attributes to your markup: tabindex="0" to make the element focusable, and popover-trigger="focus" to make it dismiss the popup once you click off.
Example with <i> tag which is not focusable:
<i popover-html="someModelWhichContainsMarkup" popover-trigger="focus"
tabindex="0" class="fa fa-question-circle"></i>
You can use following code:
<div ng-app="Module">
<div ng-controller="formController">
<button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" popover-placement="left" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span>prasad!!</span>
</div>
</script>
</div>
</div>
In Script :
<script type="text/javascript">
var app = angular.module("Module", ['ui.bootstrap']);
app.controller("formController", ['$scope', function ($scope) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html'
};
}]);
</script>
Works for me, add this attribute to the tag which is calling/opening the popup, DON'T MISS THE SINGLE QUOTES AROUND outsideClick
popover-trigger="'outsideClick'"
This opens only one popover and closes upon clicking outside of popover
popover-trigger="outsideClick"
I am completely new to Angular js and I want to perform an operation i.e. clicking on a button would slide in a div from the right and clicking back again would send it back to right. Basically toggle it.
I know how to do with jquery as below, but the need is to do it in angular.
HTML:
<body>
<div>
Click me
</div>
<div id="content">
<div id="list">
</div>
</div>
</body>
CSS:
#clickhere {display:block; width:50px; height:50px; background:#999;}
#list{width:200px; height:100%; position:absolute;top:0;right:-200px;background:#323232;}
.slidein{right:0;}
JS:
$("#clickhere").click( function(){
if($("#list").css("right")== "0px")
{
$("#list").animate({right:"-200px"}) }
else{
$("#list").animate({right:"0"})
}
})
jsfiddle - http://jsfiddle.net/RJJwu/3/
Can anyone please help me with the angular code. I looked over a couple of examples such as :
1) Different transitions with AngularJS
2) http://mgcrea.github.io/angular-motion/ - in section Slide, 2nd button
The above links represent my actual need. I tried doing it via 1st link, but its not working.
Hint : add or remove a class (ngClass or ngHide) when the user click on the button (ngClick) and do the animation in CSS (transition).
I am looking at the demo of MobiScroll and have chosen the following options:
Demo Page: Demo
Demo: Time
Display: Modal
Mode: Scroller
The demo example shows the resulting HTML I should use as:
<input id="i" name="i" />
Show
Clear
When I use this HTML, the Show and Clear buttons show up on the page and when I click in the input box, the Mobiscroll shows up inline. In the demo, these buttons appear with the Mobiscroll in a modal dialog. Do I need to wrap the HTML in a div with a special tag?
Thanks!
The issue was that the jQuery Mobile js + css files were required to get the modal popup. The directions on the site are not clear! I added the following and presto!
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />