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' }"
Related
I used ng-bind-html and show success data, but I want to show only text, not show data with style , because it ruined my layout:
Data is content's notes: <h1>some text....</h1>
My filter:
var myApp = angular.module("myModule", []);
myApp.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
My view:
<p ng-bind-html="note.content.substr(0, 130) + '...' | to_trusted"></p>
Short answer: You can apply a css class to the div, resetting html tag formatting behavior overriding it. For example:
<p class="ignore-html-tags" ng-bind-html="note.content.substr(0, 130) + '...' | to_trusted"></p
And in your css:
.ignore-html-tags * {
font-size: 10px !important;
font-weight: normal !important;
/* any other style overwrite */
}
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'm getting stuck for change div style when I click another div. I just want to change listAnswer class text-decoration become underline when I click one of ng-repeat div1. I hope someone can help me :( thanks
<style>
.object_screen {
width: 800px;
height: 500px;
}
.div1 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
}
</style>
<div class="object_screen">
<div class="div1" ng-repeat="object in objectList" ng-click="checking(object.name);" ng-style="{'background-image':'url(./img/level/{{ object.image }})}"></div>
</div>
<div class="listAnswer">
<li ng-repeat="object in objectList">{{ object.name }}</li>
</div>
this my angular script
var App = angular.module('App', ['ngRoute']);
App.controller('playController', ['$scope', '$http', function($scope, $http) {
$scope.objectList = [];
$scope.objectList.push({name:'tony', image:'image1.png'});
$scope.objectList.push({name:'Jay', image:'image2.png'});
$scope.objectList.push({name:'Michael', image:'image3.png'});
$scope.checking= function(nameObject){
// change text-decoration to underline for class listAnswer
}
}]);
You may declare a variable in your scope to have a Boolean false initially and change it to true in $scope.checking and have the ng-class as in the succeeding line
div class="listAnswer" ng-class="{ 'your text decoration css class' : watch variable set in the $scope.checking}" your text decoration class will be applied when the variable is set to true
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'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: