I have a hidden component in a directive and yet when the page is loaded, the hidden element appears for the duration of the animation, which should only be triggered when the component's model is set to visible.
In this example I set the component to ng-hide="true" permanently, and when the page is loaded it still appears for half a second. In my real program the directive is much more complicated, so I placed the template in its own file, the problem doesn't appear if I just put it in a string.
I tried adding style="display:none" to the template's content, but then it doesn't react to model changes later.
<html ng-app="myApp">
<head>
<style>
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
transition: all linear 0.5s;
}
.overlay.ng-hide {
opacity: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-animate.min.js"></script>
<script>
angular.module("myApp", ['ngAnimate'])
.directive("overlay", function() {
return {
replace: true,
templateUrl: "overlay.html"
};
});
</script>
</head>
<body>
<overlay></overlay>
</body>
</html>
overlay.html:
<div class="overlay" ng-hide="true"></div>
Plunker: http://plnkr.co/edit/tYLkGwPJtFPxH2ES6qIe?p=preview
You could do the opposite using ng-class instead. Switch your CSS so the overlay only shows when you add a class show:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0;
transition: all linear 0.5s;
}
.overlay.show {
opacity: 1;
}
Then just use the ng-class directive on your overlay, change the false value to whatever expression you have in mind.
<div class="overlay" ng-class="{show : false}"></div>
Here's the Forked Plunker
You can add a link function that adds a display: none property to the overlay element temporarily and then removed afterwards when the ng-hide directives kicks in by watching the ng-hide initial value and then removing the display: none property and deregistering the watcher.
Something like this:
FORKED PLUNKER
.directive("overlay", function() {
return {
templateUrl: "overlay.html",
link: function(scope, elem, attr) {
elem.css('display', 'none');
var dereg = scope.$watch(attr.ngHide, function(value) {
elem.css('display', '');
dereg();
});
}
};
});
Note that I have removed the replace property, it is depreciated in angular 3.0 and above. Reference
Related
hey i'm trying to make a border for items listed with ng-repeat, i used the link function but i do not want to work, i do not draw a border and it only creates dashes.
directive
(function(){
angular.module('app')
.directive('myDirective', function(){
return {
restrict : 'E',
scope : {
list : '='
},
template: '<div class="dire" ng-repeat="item in list">{{item}}</div>',
link: function($scope, $element, $attrs) {
$element.addClass('active');
}
}
});
demo
https://codepen.io/Turqus/pen/mqKVWY?editors=1111
Your div element is an inline object. You need to make it a block or inline-blockelement by using display: block;. This is not depending on your directive. It's CSS problem.
.active {
border: 1px solid red;
font-size: 50px;
box-sizing: border-box;
background-color: yellow;
color: red;
display: block;
}
>> CodePen
I have the ng-click and ng-if directives on the same div.
Since the click variable is initially set to false the box DIV does not appear. If I set click to true or use !click for ng-if directive, then the box DIV appears but still no animation occurse upon clicking.
If I remove the ng-click from box DIV and add it to another DIV or button to do the toggle, animation works. However, the box DIV is still hidden initially and also disappears after the animation run.
HTML
<div ng-app="animationApp" ng-controller="c1">
<div ng-click="click=!click" ng-if="click" class="box"></div>
</div>
JS
angular.module('animationApp', ['ngAnimate'])
.controller('c1', function ($scope, $animate, $timeout) {
$scope.click = false;
})
;
CSS
.box {
width: 40px;
height: 40px;
background-color: indianred;
}
.box.ng-enter {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
transform: rotateZ(0deg);
}
.box.ng-enter-active {
transform: rotateZ(-180deg);
}
.box.ng-leave {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
transform: rotateZ(-180deg);
}
.box.ng-leave-active {
transform: rotateZ(0deg);
}
Demo
https://jsfiddle.net/ae8kwzxg/93/
This line is do nothing: "ng-click="click=!click".
The reason why is not work is because your $scope.click variable is primitive type (bool). It means in this line: ng-click="click=!click" click variable is a copy of your $scope.click variable and you just change the copy but not the actual $scope.click. If you will change your $scope.click variable to object, for example $scope.click = {active:true}
and change your HTML to: <div ng-click="click.active=!click.active" ng-if="click.active" class="box"></div>
It will work.
But better way is always do assignments in function:
<div ng-app="animationApp" ng-controller="c1">
<div ng-click="clicked()" ng-if="click" class="box"></div>
</div>
And your controller will be:
angular.module('animationApp', ['ngAnimate'])
.controller('c1', function ($scope, $animate, $timeout) {
$scope.click = true;
$scope.clicked = function(){
$scope.click = !$scope.click;
}
})
This is working example: https://jsfiddle.net/ae8kwzxg/94/
I have the above page structure . i want to check a conditon to apply style in div with id if the buttonlayout has a class proceed.
<div>
<div id="main">
</div>
<div id='buttonlayout" class="proceed">
</div>
I am displaying the <div id='buttonlayout" class="proceed"></div> based on some conditions. so if the div doesnt exist I dont want to apply sty;e. How can I check this in angular js?
So the logic I am looking for is
if (.div-proceed) exist add an extra style to div (with id main). Is it possible to check in my html page itself (ng-class)?
You can set conditions in ng-class, as sample $scope.proceed default is false our condition is when $scope.proceed is true add class proceed to the element.
This mean if $scope.proceed = false the class not exist, and if it true class is exist.
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", "$filter", function($scope, $filter) {
$scope.change = function() {
$scope.proceed = !$scope.proceed;
}
}]);
body {
padding-top: 50px;
}
a{cursor: pointer}
#buttonlayout {
width: 100px;
height: 100px;
transition: all 0.5s;
background-color: #ccc;
}
#buttonlayout.proceed {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<a ng-click="change()">click to remove/add 'proceed' class</a>
<div id="buttonlayout" ng-class="{'proceed': proceed}"></div>
</div>
i want my error message div to appear when i click on the submit button and i want that screen should auto scroll to that div my code snippet are below:
CSS:-
.error_msg
{
background: none repeat scroll 0 0 #F16200;
border: 0 solid #FF1055;
color: #EFEFEF;
display: block;
margin-top: 5px;
text-align: center;
width: 41%;
}
HTML of that div:
<div id="error" class="error_msg"> Speed Link Successfuly Created for {{display}}
controller which is invoking on submit:-
tmeModuleApp.controller('speedLinksController',function($scope,APIServices,Paths,$rootScope) {
$scope.setSpeedLink =function() {
var setLink = $('.active').attr('valset_link');
var display = $('.active').attr('valset_display');
var display_name = $('.active').attr('valset_link_name');
if(setLink != '')
{
$location.hash('error');
$scope.display= display_name;
}
}
}
Check out angulars $anchorScroll service.
You should inject $anchorScroll and call it after $locaiton.hash call.
Update
Example
HTML
<div id="scrollArea" ng-controller="ScrollCtrl">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
JS
function ScrollCtrl($scope, $location, $anchorScroll) {
$scope.gotoBottom = function (){
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}
I'd like to apply CSS to a directive element but the following example does not work. Any suggestions?
Directive:
app.directive('test', function() {
return {
restrict: 'E',
templateUrl: 'test.html'
};
});
test.html:
<div></div>
index.html:
<body>
<test></test>
</body>
CSS:
test {
width: 100px;
height: 100px;
background-color: yellow;
}
Here is a plunker:
It's a css issue, just add display: block;:
test {
width: 100px;
height: 100px;
background-color: yellow;
display: block;
}
In HTML, Some tags ( like div) get rendered as Block-level Elements by default.
When you create a custom tag it would default to be an inline-element.
Read this article: http://www.impressivewebs.com/difference-block-inline-css/
You can inspect it inside the developer tools: