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:
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 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 would like to show and hide div using Angularjs, but i am new in Angular so need some help Thanks in Advance.
I want to fire event on click of this a tag
<div style="width: 50px; height: 50px; background-color: red;">I want to show this element</div>
<div style="width: 50px; height: 50px; background-color: red;">I want to Hide this element</div>
controller.js:
app.controller('MainCtrl', function($scope) {
$scope.showDiv = '1';
$scope.toggleShow = function(){
$scope.showDiv = !$scope.showDiv;
}
});
HTML:
<body ng-controller="MainCtrl">
I want to fire event on click of this a tag
<div ng-show="showDiv" style="width: 50px; height: 50px; background-color: red;">Show this element</div><br>
<div ng-hide="showDiv" style="width: 50px; height: 50px; background-color: green;">Hide this element</div>
</body>
Here is the Plunker: http://plnkr.co/edit/DWobFzvas9x4lhaoNfTI.
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
I seem unable to use a controller to set the CSS background property of a div. Here is my code so far, as per the documentation:
HTML:
<div class="hero" ng-controller="HeroCtrl" ng-style="heroImage"></div>
JS:
'use strict';
angular.module('AppliedSiteApp').controller('HeroCtrl', function ($scope) {
$scope.heroImage = {
background: 'images/brick.jpg'
};
console.log($scope.heroImage);
});
CSS:
.hero {
width: 100%;
min-height: 350px;
background-position: center center;
}
I have also tried to replicate this setup in a Fiddle here. Does anyone have any ideas?
$scope.heroImage = {
background: 'url(images/brick.jpg)'
};
background-image requires url() to work.
You need to use css' url() function for background images , like this:
'background-image': 'url(http://i.stack.imgur.com/mfvI9.jpg)'
Plunker: http://plnkr.co/edit/PFUY0w?p=preview
AngularJS now suppoorts ng-style.
So now you can use ng-style="{ backgroundImage: variableInScope + '/some/string' }"