I try to create a simple fade-in fade-out animation using ngAnimate. The animation looks good except that the container of the view contains both the source and the target template while animation.
How can I show the active template only?
<html ng-app="testApp" lang="en">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>
<script type="text/ng-template" id="/page1.html">page1 content</script>
<script type="text/ng-template" id="/page2.html">page2 content</script>
<script>
var app = angular.module('testApp', ['ngRoute','ngAnimate']);
app.config(function($routeProvider) {
$routeProvider.when('/page1', {templateUrl: '/page1.html'});
$routeProvider.when('/page2', {templateUrl: '/page2.html'});
});
</script>
<style>
#container {border: 1px solid black;} /**the container has double height while animation*/
#content {-webkit-transition: opacity .2s linear;}
#content.ng-enter {opacity:0;}
#content.ng-enter.ng-enter-active {opacity:0;}
#content.ng-leave {opacity:1;}
#content.ng-leave.ng-leave-active {opacity:0;}
</style>
</head>
<body>
<div id="container">
<div id="content" ng-view></div>
</div>
</body>
</html>
There are multiple solutions:
Delay the enter animation (transition-delay) with the duration of the leave animation
Remove either the enter or leave animation
Use #content{position: absolute} or #content + #content {margin-top: -$height px} so that the height of the parent is not affected.
Related
I'm trying to use HTML to style the title in a popover window in angular bootrap, but it's appearing as plain text
Since the the popover body can contain HTML styling, I thought this would work
<!doctype html>
<html ng-app="popover.title.html">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
angular.module('popover.title.html', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('popover.title.html').controller('htmlTitleCtrl', function ($scope, $sce) {
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
});
</script>
<div ng-controller="htmlTitleCtrl">
<div style="padding-top: 15em; padding-left: 7em;">
<button uib-popover-html="htmlPopover" popover-title="This is in <span style='color:red;'>red</span>" class="btn btn-default">HTML Popover</button>
</div>
</div>
</body>
</html>
Running plunkr: https://plnkr.co/edit/A1qwqnxOZwLCs05ePS38?p=preview
Is it possible to have the colours display correctly in the title?
The title of the popover used ng-bind which sets the title element's textContent (https://github.com/angular-ui/bootstrap/blob/master/template/popover/popover-html.html#L4, https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L63). This means HTML code within the title won't be rendered as HTML.
You can, however, use CSS to style the title of the popover.
I would very much like to integrate in my angular app the Basic Usage template
from Angular Materials.
I really like the transition effect when the <> is clicked.
I already did a search for that directive on their website but did not find it. The closest thing I managed to find is the Toolbar, but it's slightly different in the way that the upper corners are not rounded. Also, using a simple ng-show, will not provided that transition.
Any suggestions on how to achieve this?
You can do that with angular animations which is just some simple CSS with transitions. And you are on the right track with md-toolbar. The demos use it, you just need to set some CSS to round the top corners.
md-card md-toolbar {
border-radius: 3px 3px 0 0;
}
Now add some content below the md-toolbar that you want to toggle and use ng-show on it.
<div class="toggle-content" ng-show="open">
The toggled content!
</div>
Then just check the ngShow documentation on how to animate it with CSS. What you want to animate here is the height of the toogle-content element. When it is hidden, height: 0 is applied, otherwise height: 200px.
.toggle-content {
height: 200px;
background: red;
}
.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove {
transition: height linear 0.5s;
}
.toggle-content.ng-hide {
height: 0;
}
And of course you need a md-button in the toolbar that toggles the content.
<md-button ng-click="open = !open">
Toggle
</md-button>
Complete example: http://codepen.io/kuhnroyal/pen/XXZPrE
You need to implement something akin to the slideToggle() method in jquery. The Angular Slideables directive provides this functionality.
The straight corners are a custom style implemented in addition to the md-toolbar directive.
It turns out this is the closest thing that I managed to find that suits my needs.
'use strict';
angular.module('ui', ['ui.bootstrap']);
(function() {
angular.module('ui', [
"ui.bootstrap",
"ngAnimate"
]);
var module = angular.module("ui");
module.controller("controller", function($scope) {
var model = this;
model.oneAtATime = true;
model.Operators = [{
ReportItemName: "asd"
}, {
ReportItemName: "fds"
}];
});
}());
<!DOCTYPE html>
<html ng-app="ui">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-animate#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script data-require="ui-bootstrap-tpls-0.11.2.min.js#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="controller as model">
<uib-accordion close-others="model.oneAtATime">
<uib-accordion-group heading="Custom template">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
<h1>Some Content</h1>
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
Other solutions that provide out-of-the-box functionality are very much welcomed.
I'm trying to 'mask' an image, turning it into a circle. The code below loads, resizes and shows the image but no circle.
In my html div which refers to my controller:
ng-style='obj.avatar_style'
In my controller:
$scope.obj.avatarURL = UserModel.getAvatarURL();
$scope.obj.avatar_style = {'width': '30px', 'height': '30px', 'border-radius': '15px', 'background-image': 'url(' + $scope.obj.avatarURL + ')', 'background-size': '30px 30px'}
I hope this is something you wanted to get, you can add the other styles yourself.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.avatar_style = {
'border-radius': '50px'
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<img src="http://revistasindromes.com/images/100x100.gif" ng-style="avatar_style">
</body>
</html>
ngStyle is for setting individual style elements. In your case you should move most of your styles to e.g. thre .avatar class in your stylesheet and then in your html something like this
<div class="avatar" ng-style="{'background-image': $scope.obj.avatarURL}">
I'm learning Angular so I can get into web app development. I'm doing a test project but can't get ng-view to work. My HTML is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>
<center>
<div class="interface" ng-controller="SelectionController">
<div style="height: 10%">
<img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif">
<center><h1>{{ title }}</h1></center>
</div>
<div style="height: 85%" ng-view></div>
<div style="height:5%">
<p>Having trouble? Request Support
<p style="bottom: 50px; position:fixed; size:8px">Footer Text
</div>
</div>
</center>
<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>
I also have app.js:
var app = angular.module('TestProject',['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider){
$routeProvider
.when('/', {
controller: 'SelectionController',
templateUrl: '/views/home.html'
})
.when('/home/', {
controller: 'SelectionController',
templateUrl: '/views/home.html'
})
.otherwise({
redirectTo: '/home/'
});
});
As well as controllers.js, which currently only has:
app.controller('SelectionController', ['$scope',function($scope) {
$scope.title = 'Title!';
}]);
And then I have a home.html,
<div>
<h2>Welcome to this page! Please select an option below.</h2>
<table>
<td><div><img class="Symbol" src="../pictures/pica.jpg"></div></td>
<td><div><img class="Symbol" src="../pictures/picb.jpg"></div></td>
<td><div><img class="Symbol" src="../pictures/picc.jpg"></div></td>
</table>
</div>
which SHOULD be loaded into ng-view. My aim is to make a single page where the center div of the window changes so I can load different screens to do whatever the app does without reloading the other stuff. The current directory structure is like this:
--angular
------app
------controllers
--lib
------angular.min
------angular-animate.min
------angular-route.min
------Chart.js
------jquery-1.11.3
--pictures
------pica
------picb
------picc
--views
------home.html
index.html
test.css
What I have now makes {{ title }} change the way it's supposed to, but there's nothing in the middle of the page. When I inspect the page, I see that the ng-view directive is commented.
<-- ngView: undefined -->
Is where my content from home.html is supposed to be. Why is ngView being commented out here?
I had this EXACT issue. what resolved it for me was, as Brendan Green mentioned,
changing my route to be : templateUrl instead of : templateURL ...casing made a huge difference!!!!
The html file that you show should be:
This file should be the index.html.
<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>
<div ng-view></div>
<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>
And then create a new html file, should be as you have in the routeProvider, and should be inside inside view folder, as it view/home.html
And content must be:
<div class="interface" ng-controller="SelectionController">
<div style="height: 10%">
<img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif">
<center><h1>{{ title }}</h1></center>
</div>
<div style="height:5%">
<p>Having trouble? Request Support
<p style="bottom: 50px; position:fixed; size:8px">Footer Text
</div>
</div>
Thats the way angular works.
Regards.
I'm working on a basic AngularJS app. This app will have pages that are going to be defined within templates. When a user changes pages, I want to be able to show the other page with a basic animation. Currently, my app is doing this. However, the previous page drops below the new page and sort of flickers. I can't figure out why this is happening. Here is my code:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.js"></script>
<style type="text/css">
.myAnimation { height:480px; width:640px; overflow:hidden; }
.myAnimation.ng-enter { animation-duration: .3s; animation-name: fadeIn; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }
.myAnimation.ng-leave { animation-duration: .3s; animation-name: fadeOut; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }
#keyframes fadeIn {
from { opacity: 0; transform: scale(.9, .9); }
to { opacity: 1; transform: scale(1, 1); }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
</head>
<body style="margin:0; padding:0;">
<ul style="list-style-type:none; margin:0px; padding:0px;">
<li style="display:inline;"><a href='#page1'>Page 1</a> </li>
<li style="display:inline;"><a href='#page2'>Page 2</a> </li>
</ul>
<div style="display:block; border:1px solid black;">
<div ng-view class="myAnimation"></div>
</div>
<script type="text/javascript">
angular.module('app', ['ngRoute', 'ngAnimate']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/page1', {templateUrl: 'views/page1.html', controller: Page1Ctrl}).
when('/page2', {templateUrl: 'views/page2.html', controller: Page2Ctrl}).
otherwise({redirectTo: '/page1'});
}]);
function Page1Ctrl($scope, $http) {
}
function Page2Ctrl($scope, $http) {
}
</script>
</body>
</html>
How do I prevent the scrollbar from appearing when I change pages? And prevent the older page from dropping below the new page?
Thank you!
It's likely that you need to give the animated divs a position:absolute; style during the animations.
What is happening is that the second template is being loaded into the DOM while the first template is still doing the fade-out animation. Without position:absolute they do what is natural and start block stacking until the first template has fully faded out and Angular removes it.
Keep in mind if you add position:absolute you may also have to play with the "Top" value to position it correctly depending on which parent element has position:relative or absolute.
You can put the position:absolute class on the animated div generally, or just specifically on the animating classes depending on what works better for your app structure.