在角度指令中訪問模板子元素

Question

我試圖從一個很好的jquery zooming/panning library中作出指令。我如何訪問我的模板中的元素來初始化插件？

該指令看起來像這樣截至目前：

directive('zui', [function() { 
    return { 
     restrict: 'E', 
     scope: { URL: "@"}, 
     template: '<div id="zui" ><div id="viewport" ><img ng-src="{{imageURL}}"></div></div>', 
     link: function (scope, element, attrs) { 
      scope.imageURL = URL; 

      var zui = new ZUI53.Viewport(document.getElementById('zui')); 
      zui.addSurface(new ZUI53.Surfaces.CSS(document.getElementById('viewport'))); 

      var pan_tool = new ZUI53.Tools.Pan(zui); 
      zui.toolset.add(pan_tool); 
      pan_tool.attach() 
     } 
    }; 
}]); 

顯然document.getByID()是不是爲了實現這一目標的最佳途徑。什麼是更好的解決方案？非常感謝。

Answer 1

使用document.getElementById('zui')進入元素確實不好。如果您必須擁有zui指令的兩個實例，它將會中斷。

1. 請勿在根元素上使用id。使用標記類 如class="zui"或數據屬性如data-zui。

2. 使用jquery，你可以使用find來獲得你的元素，如 這個：element.find('.zui')[0];。