如何在 AngularJS 自定义指令中对角移动父 <div>

Question

以下代码示例工作正常：动态生成的 ellipse 元素的颜色遍历数组中的颜色。

作为一个变体，我尝试在自定义指令中动态更新父 div 元素的 style 属性，以便 div 元素是通过将 'position' 设置为 absolute 以及将 left 和 top 属性设置为多个，基本上向下和向右移动相应 div 元素的 id 值。

由于 id 的值可在 compile 中访问，因此似乎是更新父 的方便位置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>

Answer 1

您目前的做法是正确的，但是当您想要更改元素的 style 时，您需要通过执行 tElem[0] 使用该元素的实际 DOM该 div 元素的 DOM。

代码

tElem[0].style.left = left+"px";
tElem[0].style.top  = top+"px";
tElem[0].style.position = "absolute";

Using Style Plunkr

更好的方法

jQLite 的所有 css 属性到 .css 方法应该更好，它将接受 json 格式的所有属性及其值。

代码

tElem.css({
  'left': left + "px",
  top: top  + "px",
  position: 'absolute'
});

Demo Plunkr

如何在 AngularJS 自定义指令中对角移动父 <div>

How to shift parent <div> diagonally in AngularJS custom directive

html

css

directive

angularjs

angularjs-directive

更好的方法