Hi I'm creating an Angular bootstrap popover, and the popover contains a directive. The user story is that when the user clicks on a row inside an ui-grid table, the popover will show. But it seems that in HTML code the data is not actually passed into the directive. Related code is here:
search.tpl.html:
<div class="gridStyle" ui-grid="vm.selectedTypes" ui-grid-resize-columns ui-grid-selection style="margin-top: 0px; z-index: 4; position: relative">
</div>
<script type="text/ng-templae" id="popover.html">
<div style="z-index:10; position: relative">
<type-view type="vm.type" domain="vm.domain" pos="{top: 0, left: 0}">
</type-view>
</div>
</script>
search.js:
//In configure
controllerAs: "vm",
...
//In controller
var vm=this;
vm.type=[...];
vm.domain=[...]; //both var get values inside
Now the popover is shown, and the directive is inside, but the values (vm.type and vm.domain) are not injected into the directive; I checked the console, and in the directive 'pos' is injected, so I suppose maybe it's because the scope is different inside a popover and directly using vm.sth will not work. How can I resolve this? Thanks!
Related
Hi I'm adding a popover to UI grid in AngularJS. The idea is when the user mouse-over a row a popover will show up, and the popover contains a directive. I've successfully implemented this part, but now the problem is that part of the popover is blocked by the ui grid table, like this:
I want to bring the popover to the front, and I've tried setting z-index for both the ui grid table and the popover. Related code is here:
JS part:
function rowTemplate() {
var template = [];
...
template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>');
return template.join(' ' );
}
HTML:
<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative">
</div>
<script type="text/ng-template" id="popover.html">
<div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative">
<directive-related part />
</div>
</script>
But after I set the z-index it's still not working. How can I resolve this?
Some of my references are here: popover: popover, z-index: z-index.
Thanks!
Note: I am making the assumption here that you are using ui-bootstrap.
I have found that usually you need to use the append-to-body attribute with ui-grid custom formats.
Try changing the template like so to add that attribute:
template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')
I am not able to understand how the ngAnimate works exactly. here is my doubt.
1) ngAnimate - only works on directives?
2) how to make ng-animate work without the directive
3) Any of above way, how to add call back after animation complete?
Because i see all the animation examples only with directives.
I have a small demo here, any one help me to animation both without directive and with directive approach to simply adding a class name as `fade'?
my CODE:
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2>Let me Fade</h2>
</div>
</div>
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2>Let me Fade</h2>
</div>
</div>
Demo to update
I am not able to understand how the ngAnimate works exactly. here is
my doubt.
ngAnimate is a module that provides support for animations in angular apps. There are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. For CSS based animations, angularjs adds a class ng-enter/ng-leave whenever an element is shown/removed from 'view'. You simply need to play with these classes to make the animation work!
Prerequisite:
You would need to add the library for angular-animate
<script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js">
</script>
and include ngAnimate as the dependency in your myApp module.
var myApp = angular.module('myApp', ['ngAnimate']);
1) ngAnimate - only works on directives?
Yes. You cannot use ngAnimate without directive.
According to documentation, following directives are "animation aware":
ngRepeat, ngView, ngInclude, ngSwitch, ngIf, ngClass,
ngShow, ngHide, ngModel, ngMessages and ngMessage
2) how to make ng-animate work without the directive
You cannot!. Remember, even ng-click is a directive
3) Any of above way, how to add call back after animation complete?
Yes, You can add a callback after the animation is complete using the $animate service(which would usually be done in a custom directive) and use $animate.leave(element, [options]);
Have a look at this example for triggering events after the animation ends.
Finally, here is the updated demo you mentioned in question.
You may toggle a flag to true/false with each click on <h1> and make content inside <h2> hide/show based on flag.
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2 ng-if="flag" class="fade">Let me Fade</h2>
</div>
</div>
Also, you'd need to handle fade-effect with css
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
Hope it helps!
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2 ng-if="clicked" class="animate-if">Let me Fade</h2>
</div>
I added a variable named clicked which is set to true or false to animate the Let me Fade Text
var myApp = angular.module('myApp', []);
myApp.controller('count', function($scope) {
$scope.clicked=false;
$scope.animate = function () {
$scope.clicked=!$scope.clicked;
}
});
In this JS file upon clicking the click me button the variable clicked is set to true or false .
**
h2.fade {
opacity : 0;
transition: opacity 1s ease-in-out;
}
.animate-enter, .animate-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
}
.animate-enter.animate-enter-active, .animate-leave {
left: 0;
}
.animate-leave.animate-leave-active, .animate-enter {
left: 500px;
}
**
Here in the css file i added css for the class animate which acts upon clicked variable if the variable is true it goes for animate-enter-active
otherwise it goes for leave-active
I'm new in AngularJS, how can i show popup a div on mouseover using AngularJS. If i resize a div on mouseover, it changes whole structure, how to show popup div without disturbing neighbors elements.
Markup
<div ng-repeat="x in images | filter:test" style="float:left; width:30%" ng-mouseover="count=1" ng-mouseleave="count=0" >
<img ng-src="{{x.path}}"
style="width: 100px; height:100px"><div> {{x.company}}</div>
<div style="background-color:#E6E6FA;text-align: center;"ng-show="count">
price:{{x.price}}</br>
size:{{x.size}}</br>
</div>
</img>
<div/>
I added extra things in markup like company,size on mouseover. help me in pop a image on mouseover. Thanks in advance
You have to do two things. First you have to position your popover element absolute, so that it doesn't disturb the flow of the other elements when it pops up. Something like this (z-index is what makes it to be over the other elements):
.popover {
position: absolute;
z-index: 100;
}
And in your html-markup you can use the ng-mouseover directive.
<div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>
Your angular controller will probably look something like this
$scope.showPopover = function() {
$scope.popoverIsVisible = true;
};
$scope.hidePopover = function () {
$scope.popoverIsVisible = false;
};
If you have more than one, you are probably better of putting all that stuff into a directive
I have this in my dom
<div id=“my-lightbox-container" style="height: 0px;”>
<div id=“my-lightbox" role="dialog" style="width: 660px; height: 342px;”>
<button id=“my-close" aria-label="Close Dialog"></button>
<iframe id=“my-iframe" name=“my-iframe" title="" src="https://mysite.com/mypage.php?page=sign-in&prop=sign-in" data-view-mode="" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; width: 660px; height: 342px;"></iframe>
<div class="my-clear"></div>
</div>
</div>
I need to be able to parse the value of src to do some business logic. I need to get the value of my attribute. I am pretty new to angular. I have done some reading and seems like that I should be using directives. However I wasn't able to make sense of the solutions. Below is my controller which is barebones
module.exports = function($scope, $routeParams, $location)
{
}
would appreciate any help here. Coming from jQuery background.
Use the ng-src directive instead of src and bind it to a variable in your scope :
<iframe id=“my-iframe" name=“my-iframe" title="" ng-src="context.url" data-view-mode="" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; width: 660px; height: 342px;"></iframe>
And in your controller :
$scope.context = {'url':'https://mysite.com/mypage.php?page=sign-in&prop=sign-in'};
That way, you have two-way binding between your controller variable and your iframe source. If one changes, the other will reflect this change.
You might also want to look into the $sce service : How to set an iframe src attribute from a variable in AngularJS
Angular doc: https://docs.angularjs.org/api/ng/service/$sce
I want use ng-class to conditionally add a class to the accordion-heading, but it appears that not even setting a class explicitly on the element gets preserved. I have this:
<div accordion close-others="true">
<div ng-repeat="currItem in items" accordion-group>
<div accordion-heading class="myClass">My Heading {{$index}}</div>
<div class="accordion-inner myClass">asdf asdf asdf</div>
</div>
</div>
And the fiddle: http://jsfiddle.net/Zmhx5/1/
When I inspect the accordion heading element, the class myClass is nowhere to be found. Is there some reason I can't add classes to the accordion heading?
You can put the CSS inside the directive accordion-heading tags:
<accordion-heading>
<div class="myClass">My Heading {{$index}}</div>
</accordion-heading>
In Angular UI Bootstrap, they have created a directive for accordion-heading. Template for this is written in ui-bootstrap-tpls.js. Try to modify directive for accordion-heading.
I ran into the same issue trying to conditionally apply a background color to the heading with ng-class. This is a bit of a workaround, but it does the trick.
First we need to remove the padding from the heading. If you inspect it, you'll see that it generates a div with a .panel-heading class and a padding: 10px 15px (see note below). The padding is what causes issues when trying to apply a background to a nested div, so lets remove it.
.panel-heading {
padding: 0;
}
Now we can add our nested div and give it the same padding to get back our previous look.
<accordion-heading>
<div class="myClass" style="padding: 10px 15px">My Heading {{$index}} </div>
</accordion-heading>
Here's the updated jsfiddle
Note my code above is from a different version of ui-bootstrap. The classes were slightly different in this jsfiddle, so you will see a slightly different solution. The concept, however, is the same.
you could just apply your CSS to an outer div like this:
HTML:
<div ng-app="myApp" ng-controller="MyCtrl">
<div accordion close-others="true">
<div class="myClass" ng-repeat="currItem in items" accordion-group>
<div accordion-heading>
<div>My Heading {{$index}}</div>
</div>
<div class="accordion-inner">asdf asdf asdf</div>
</div>
</div>
</div>
CSS:
.myClass {
background-color: gray;
color: black;
}
.accordion-inner {
background-color: green;
color: black;
}
JS:
angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function ($scope) {
$scope.items = [{}, {}, {}, {}];
});
then, change it to use ng-class and it should work just fine
pd: (Sorry about the bad english)