The following code sample works correctly: the colors of the dynamically generated ellipse elements iterate through the colors in an array.
As a variation, I'm trying to dynamically update the style property of the parent div element in a custom directive so that the div elements are essentially shifted downward and to the right by setting 'position' to absolute and also the left and top properties as a multiple of the id value of the corresponding div element.
Since the value of id is accessible in compile, it seems like a convenient location to update the parent div, but tElem is undefined here:
How do I access the parent element to update its style-related properties?
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Custom SVG Directive in AngularJS</title>
<style>
div { width:80px; height: 40px; }
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
</script>
<script>
var app = angular.module("app", []);
app.directive('div', function() {
var colors = ["red", "green", "orange", "blue", "#fcc"];
var color = colors[0];
var shape = '<ellipse cx=40 cy=40 rx=30 ry=15 fill="'+color+'">';
var mydir = {};
mydir.restrict = 'E';
mydir.template = '<svg>'+shape+'</svg>';
mydir.compile = function(tElem, tAttrs){
var id = tAttrs['id'];
color = colors[id % colors.length];
var shape =
'<ellipse cx=40 cy=40 rx=30 ry=15 fill="'+color+'">';
mydir.template = '<svg>'+shape+'</svg>';
//==============================================
// set a 'position:absolute;' property for <div>
// and also shift the <div> element diagonally:
// var left = id*80, top = id*40;
// tElem.style.left = left+"px";
// tElem.style.top = top+"px";
// tElem.style.position = "absolute";
//==============================================
};
return mydir;
})
app.controller("MyController", function() {});
</script>
</head>
<body ng-controller="MyController as mc" >
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
</body>
</html>
The current way you are doing is correct but when you want to change the
styleof element you need to use actual DOM of that elemenet by doingtElem[0]which will have DOM of thatdivelement.Code
Using Style Plunkr
Better way
Better should all the css property to
.cssmethod of jQLite, which would accept all the properties in json format with their values.Code
Demo Plunkr