Question

这是一个使用Plangular制作的自定义Soundcloud播放器：一个使用AngularJS和Soundcloud API的指令。由于很多Soundcloud音轨不能通过第三方应用程序流式传输（GET请求不返回任何内容），并且基本上它们不适用于此播放器，我正在尝试使用ng-if="track"和ng-if="!track"进行检查如果轨道是否正确加载，并显示不同的内容。这工作得很好，但是当你加载页面时，即使轨道是可流式的（就像我的例子中的那个），它还没有加载到DOM上，所以在几秒钟内我看到了负面条件的内容（ng-if="!track"）。有什么技巧可以避免这种情况吗？也许可以减慢ng-if的检查速度？

这是我的html代码，{{loading}}在控制器中声明：

<body ng-app="player" ng-controller="SearchBar">
  <div plangular="https://soundcloud.com/ghostbeach/fickle-friends-for-you-ghost-beach-remix-1" ng-cloak>
    <div ng-if="!track"  class="flex flex-center" ng-cloak>
      <i class="fa fa-cog fa-spin fa-1x fa-fw mr1" ng-cloak></i>
      <div class="mr1" ng-cloak>{{loading}}</div>
    </div>
    <!-- close ng-if not streamable -->
    <div class="flex flex-center" ng-if="track">
      <div  class="mr1">
        <img ng-src="{{track.artwork_url}}" alt="{{track.title}}" style="height:60px; width: 60px;" ng-cloak/>
      </div>
      <div ng-click="playPause()"
        title="Play/Pause"
        class="flex-none h0 mr1 button-transparent cursor button-grow">
        <svg ng-if="player.playing !== track.src" class="icon geomicon" data-icon="play" viewBox="0 0 32 32" width="32" height="32" >
          <path d="M4 4 L28 16 L4 28 z "></path>
        </svg>
        <svg ng-if="player.playing === track.src" class="icon geomicon" data-icon="pause" viewBox="0 0 32 32" width="32" height="32" >
          <path d="M4 4 H12 V28 H4 z M20 4 H28 V28 H20 z "></path>
        </svg>
      </div>
      <div class="flex-auto">
        <div class="h5 bold mr2">
          <a target="_blank" ng-href="{{track.permalink_url}}">{{track.title}}</a>
        </div>
        <progress
          class="progress orange"
          ng-click="seek($event)"
          ng-value="currentTime / duration || 0">
        {{ currentTime / duration }}
        </progress>     
      </div>
    </div>
    <!-- close nf-if streamable-->
  </div>
</body>

这是我的JS：

var player = angular.module('player', ['plangular'])
   .config(function(plangularConfigProvider){
   plangularConfigProvider.clientId = 'XXX';
});
player.controller('SearchBar', ['$scope',function ($scope){ 
        $scope.loading="Track is not streamable";
}]);

JSFiddle中的行为更清晰，当你运行jsfiddle时，它显示ng-if的负面条件几秒钟，我想避免这种情况。

编辑：

是否可以将ng-show的超时设置为ng-if？

的内容

Answer 1

由于Plangular使用异步方法来获取轨道，因此除非在轨道无法延伸时添加返回错误，否则您将无法处理此逻辑。

ng-if在时间之前运行

1 个答案: