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指令的两个实例，它将会中断。

不要在根元素上使用id。使用标记类例如class="zui"或数据属性，例如data-zui。
使用jquery，您可以使用find来访问您的元素这：element.find('.zui')[0];。

访问角度指令中的模板子元素

1 个答案: