Как лениво ссылаться на элементы ng-repeat в angularjs

Question

Я работаю над галереей обложек для музыкальных релизов. Когда обложка обложена, над ней появляются кликабельные названия песен этого релиза. При щелчке по названию песни она воспроизводится / приостанавливается. Вот упрощенный 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>

Теперь я хочу визуализировать форму волны песни в элементе canvas, соответствующем этому выпуску, используя библиотеку waveform.js. Это требует ссылки на элемент canvas в javascript при нажатии на песню:

$scope.clickTrack = function(url, release.id) {
    SC.get("http://api.soundcloud.com/resolve.json?url=" + url, function(track) {
        // Do stuff to set up the waveform here, referencing the canvas element.
    });
}

Мой план состоит в том, чтобы использовать директиву waveform-container который отображает идентификатор контейнера на сам контейнер и присоединяет его к области видимости:

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

Мне интересно, есть ли лучшие способы сделать это, так как этот метод по сути вызывает document.getElementById().

Answer 1

Просто свяжите URL с областью действия директивы:

Посмотреть

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