Anchor style values inside a directive template
I have this directive:
app.directive('MessageChild', function($timeout) {
return {
restrict: 'E',
scope: {
pos: '=?',
msg: '='
},
link: function(scope, element, attr) {
scope.msg = attr.msg;
scope.styleVar = "100" //I want to insert this variable
},
template: '<style> div {position: absolute; top: **<scope variable or binding here>** }</style>' +
'<div>{{msg}}</div>'
})
This is just an example of what I am trying to do. My styles are actually much more complex and related to animation. I need to do some operations and then pass the value to my styles. How can I insert a variable at this location from my directive? Angular I don't like that I put bindings inside styles.
source to share
You can try to create an object inside a function link
, which can then be passed to the ngStyle directive.
app.directive('messageChild', function($timeout) {
return {
restrict: 'E',
scope: {
pos: '=?',
msg: '='
},
link: function(scope, element, attr) {
scope.msg = attr.msg;
scope.styleVar = {
'color': 'blue',
'position': 'absolute',
'top': '100'
};
},
template: '<div ng-style="styleVar">{{msg}}</div>'
};
});
Plunker example:
EDIT
You can accomplish the same with a tag <style>
if you like:
app.directive('messageChild', function($timeout) {
return {
restrict: 'E',
scope: {
pos: '=?',
msg: '='
},
link: function(scope, element, attr) {
scope.msg = attr.msg;
scope.styleVar = 'blue';
},
template: '<style> div {position: absolute; top: 100; color: {{styleVar}}}</style><div>{{msg}}</div>'
};
});
Plunker example:
source to share
I think Andrew Sala Answer is correct, I played around with the plunker to see if it could be animated.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
<style>
* { transition: all 0.5s}
</style>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl',['$scope','$timeout', function($scope, $timeout) {
var mc = this;
mc.name = 'World';
mc.msg = '!';
mc.data = { pos: 250, color: 'blue', size: 100 };
$timeout(function() {
mc.msg = "bob";
mc.data = { pos: 240, color: 'yellow', size: 160 };
}, 1500);
$timeout(function() {
mc.msg = "bob is";
mc.data = { pos: 230, color: 'orange', size: 210 };
}, 2500);
$timeout(function() {
mc.msg = "bob is COMING!";
mc.data = { pos: 220, color: 'red' , size: 300};
}, 3500);
}]);
app.directive('messageChild', function($timeout) {
return {
restrict: 'E',
scope: {
stuff: '=',
msg: '@'
},
link: function(scope, element, attr) {
console.log(scope.stuff);
scope.styleVar = scope.stuff.color;
scope.pos = scope.stuff.pos;
scope.$watch('stuff', function() {
console.log(scope.stuff);
scope.pos = scope.stuff.pos;
scope.styleVar = scope.stuff.color;
scope.size = scope.stuff.size;
})
},
template: '<style> div {position: absolute; top: {{pos}}px; left: 100px; font-size: {{size}}% ; color: {{styleVar}}}</style><div>{{msg}}</div>'
};
});
</script>
</head>
<body ng-controller="MainCtrl as mc">
<p>Hello {{mc.name}}!</p>
<message-child msg="{{mc.msg}}" stuff="mc.data" >stuff</message-child>
</body>
</html>
You can insert a style tag for each element, or you can use ng style, I assign different "classes" for my animations, but also included some inline styles for "glowing" and "blurry"
source to share