Доступ к дочерним элементам шаблона в угловой директиве

Question

Я пытаюсь сделать директиву из большой библиотеки масштабирования / панорамирования 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() это не лучший способ сделать это. Какое решение лучше? Большое спасибо.

Answer 1

Как добраться до элемента с помощью document.getElementById('zui') это действительно не приятно. Если вам когда-либо приходилось иметь два экземпляра zui директива, это сломалось бы.

1. Не использовать id на корневой элемент. Используйте класс маркера, такой как class="zui" или атрибут данных, такой как data-zui,

2. Используя jquery, вы можете добраться до вашего элемента, используя find как это: element.find('.zui')[0];,