0

我正在尝试从一个很棒的jquery 缩放/平移库中创建一个指令。如何访问模板中的元素来初始化插件？

截至目前，该指令如下所示：

    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()不是实现这一目标的最佳方式。什么是更好的解决方案？非常感谢。

4

1 回答 1

1

使用元素document.getElementById('zui')确实不是很好。如果您必须拥有该zui指令的两个实例，它就会中断。

  1. 不要id在根元素上使用。使用诸如 的标记类class="zui"或诸如 的数据属性data-zui。

  2. 使用 jquery，您可以使用find如下方式访问您的元素element.find('.zui')[0];：

于 2014-02-24T23:48:19.567 回答