访问angular指令中的模板子元素

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. Using jquery )，可以使用如下所示的find获取元素：element.find('.zui')[0];.