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>

现在我想使用waveform.js库在与该版本对应的canvas元素中呈现歌曲的波形。这需要在单击歌曲时引用javascript中的canvas元素：

$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将容器的id映射到容器本身并将其附加到范围：

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

如何懒惰地引用angularjs中的ng-repeat dom元素

1 个答案: