如何在angularjs中惰性地引用ng repeat dom元素

我正在为音乐发行制作封面艺术画廊。当封面艺术被鼠标移到上方时，该版本歌曲的可单击标题将显示在该艺术上方。单击歌曲标题时，将播放/暂停歌曲。以下是简化的HTML：

<div class="image-container" ng-repeat="release in releases" ng-mouseover="imageMouseOver()" ng-mouseleave="imageMouseLeave()">
    <img ng-src="{{release.imageUrl}}" class="cover"/>
        <div ng-repeat="song in release.songs">
            <a class="imgText" ng-show="revealText" ng-click="clickTrack(song.url)" href="">
            {{song.title}}
            </a>
        </div>
    <canvas class="waveform" waveform-container id="{{release.id}}">
    </canvas>
</div>

我的计划是使用一个指令波形容器，将容器的id映射到容器本身，并将其附加到作用域：

app.directive("waveformContainer", [
    function() {
            return {
                link: function(scope, element, attrs) {
                    scope.waveformContainers[attrs.id] = element;
                }
            }
    }]);

---

我想知道是否有更好的方法来实现这一点，因为此方法本质上是调用document.getElementById。

只需将url绑定到指令范围：

看法

指示

app.directive("waveformContainer", [
    function() {
        return {
            scope: {
                url: "="
            },
            link: function(scope, element, attrs) {
                scope.$watch('url', function(val){
                    if(url) {
                        SC.get("http://api.soundcloud.com/resolve.json?url=" + val, function(track) {
                            // Do stuff to set up the waveform here, referencing the canvas element.
                            // it is "element"
                        });
                    }
                });
            }
         }
    }]);

<div class="image-container" ng-repeat="release in releases" ng-mouseover="imageMouseOver()" ng-mouseleave="imageMouseLeave()">
    <img ng-src="{{release.imageUrl}}" class="cover"/>
        <div ng-repeat="song in release.songs">
            <a class="imgText" ng-show="revealText" ng-click="clickTrack(song.url)" href="">
            {{song.title}}
            </a>
        </div>
    <canvas class="waveform" waveform-container url="currentUrl" id="{{release.id}}">
    </canvas>
</div>

$scope.clickTrack = function(url, release.id) {
    $scope.currentUrl = url;
}

app.directive("waveformContainer", [
    function() {
        return {
            scope: {
                url: "="
            },
            link: function(scope, element, attrs) {
                scope.$watch('url', function(val){
                    if(url) {
                        SC.get("http://api.soundcloud.com/resolve.json?url=" + val, function(track) {
                            // Do stuff to set up the waveform here, referencing the canvas element.
                            // it is "element"
                        });
                    }
                });
            }
         }
    }]);