Access template child elements in angular directive

Question

I'm trying make a directive out of a great jquery zooming/panning library. How can I access the elements in my template to initialize the plugin?

The directive looks like this as of now:

    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()
        }
    };
}]);

Clearly document.getByID() is not the best way to accomplish this. What is a better solution? Thanks a lot.

score 1 · Answer 1 · answered Feb 24 '14 at 23:48

Getting to the element using document.getElementById('zui') is indeed not nice. If you ever had to have two instances of the zui directive, it would break.

Don't use id on the root element. Use a marker class such as class="zui" or a data attribute such as data-zui.
Using jquery, you can get to your element using find like this: element.find('.zui')[0];.

Access template child elements in angular directive

1 Answers1