I am using ng-show #animation.
index.html: -
<body>
<div ng-view></div>
</body>
templateURL contains:-
<button ng-init='shw=false', ng-click='shw=!shw;', class='share'> press me </button>
<div ng-init='shw=false', ng-show='shw', class='animate-show'>
<h1> this is animation showing </h1>
<h2> even in the begining which it should not </h2>
</div>
In the above code the templateURL file should not show or slide up when page loads.
Please view the following two plunkrs.
This is expected behavior
This is the behavior we get when using ngAnimate and ngRoute together.
You can use ng-if in place of ng-show to get your desired animation.
You can checkout this plunker I created using your sample code.
http://plnkr.co/edit/ZzxrwzecaX2yrEcSwvEn?p=preview
Related
I am working on ionic project, where I need to use single modal view & conditionally call controller for it.
I am trying to do like following -
<div ng-if="!isEditMode" ng-controller="Controller1">
<div ng-if="isEditMode" ng-controller="Controller2">
<ion-content>
<!-- My view code -->
</ion-content>
</div>
</div>
here, both controller are get called(can see console in controller). but html page not get rendered just white screen appear.
If I remove controller2 then it works fine with just one controller.
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'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
I am trying to add a switch to my partial view, it works as long as I am not switching the views using the ng-include. any idea why its breaking?
example in the plnkr code
basically this is what i am doing there:
<div ng-app="myApp">
<div ng-controller="RootController">
{{MyText}} : {{subview}}
<button ng-click="SelectAdmin()">Administration</button>
<button ng-click="SelectOperation()">Operations[Breaks!]</button>
<br/>
<div ng-switch="subview">
<div ng-switch-when="operations">
<div ng-include src="'./_partial.htm'"></div>
</div>
<div ng-switch-when="administration">
SHOWING :{{subview}}
<div class="make-switch switch-large">
<input type="checkbox" checked="" />
</div>
</div>
</div>
</div>
</div>
EDIT 1
To describe the issue a bit more:
When I start the page, I show the div that is not in the partial. i,e, set the subview = admionistrator and see an views as below.
now when i click on the "Operations" button i switch the view but use ng-include to load the partial view. and the partial view is actually showing the same content, but the view is messed up as seen in the image below.
Now even when i switch back to the earlier view by clicking on the Administrator button the make-switch is still broken.
I am using the following code block:
<section id="content">
<div class="block-border">
<div data-ng-controller="AdminGridContentController">
<ng-include src="'/Content/app/admin/partials/grid-content-base.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/table-content.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/modal-content.html'"></ng-include>
</div>
</div>
</section>
This works but when it displays first of all it displays a "block-border" which in my case is a shadow border. Then after a short time the inside contents display.
Is there a way I can make it so the outer <DIV> does not show until the inside includes are ready?
Yo should try ngCloak:
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
http://docs.angularjs.org/api/ng.directive:ngCloak
so... in your case:
<section id="content">
<div class="block-border">
<div data-ng-controller="AdminGridContentController" ng-cloak>
<ng-include src="'/Content/app/admin/partials/grid-content-base.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/table-content.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/modal-content.html'"></ng-include>
</div>
</div>
</section>
Use this:
HTML
<div data-ng-controller="AdminGridContentController">
<ng-include src="'/Content/app/admin/partials/grid-content-base.html'" ng-show="isLoaded"></ng-include>
<ng-include src="'/Content/app/admin/partials/table-content.html'" ng-show="isLoaded"></ng-include>
<ng-include src="'/Content/app/admin/partials/modal-content.html'" ng-show="isLoaded"></ng-include>
</div>
Javascript
yourApp.controller('AppController', ['$rootScope', function ($scope, $rootScope,) {
$scope.isLoaded = false;
$rootScope.$on('$includeContentLoaded', function(event) {
$scope.isLoaded = true;
});
}]);
References
ng-show
ng-include
The ng-include directive raises an $includeContentLoaded event. You could use that to set a value which in turn controls a ng-show directive placed on the block-border element.
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInclude.js#L178