。
尔
以下代码示例工作正常：动态生成的ellipse元素的颜色循环访问数组中的颜色。
作为一种变体，我尝试动态更新自定义指令中父div元素的 style 属性，以便通过将"位置"设置为absolute以及将左侧和顶部属性设置为相应 div 元素的 id 值的倍数，使div元素基本上向下和向右移动。
由于 id 的值可以在编译中访问，因此更新父 div 似乎是一个方便的位置，但此处未定义 tElem：
如何访问父元素以更新其与样式相关的属性？
<!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>
您当前的做法是正确的，但是当您想更改元素的style时，您需要通过执行tElem[0]来使用该 elemenet 的实际 DOM，这将具有该div元素的 DOM。
法典
tElem[0].style.left = left+"px";
tElem[0].style.top = top+"px";
tElem[0].style.position = "absolute";
使用样式 Plunkr
更好的方式
最好将所有 css 属性都交给 jQLite .css方法，该方法将接受 json 格式的所有属性及其值。
法典
tElem.css({
'left': left + "px",
top: top + "px",
position: 'absolute'
});
演示普伦克