延迟指令/ div直到范围值可用

Question

我有一个声音云的自定义指令,需要soundcloud网址.soundcloud url是通过$ http服务从数据库中获取的,但是,加载了soundcloud自定义指令的div,并且在它被定义之前需要soundcloud url的值.

我得到的Plangular指令代码在这里:https: //github.com/jxnblk/plangular/blob/master/src/plangular.js*我没有开发这个

这是我的HTML代码:

<div plangular="{{soundcloud}}">
<button ng-click="playPause()">Play/Pause</button>
<progress ng-value="currentTime / duration || 0">
{{ currentTime / duration || 0 }}
</progress>
</div>

这是Angular代码:

displaySong.controller('song', ['$scope', '$http', 'fetchSong', function($scope, $http, fetchSong) {
    $scope.songID
    $scope.songName;

    //Controller properties
    $scope.songPromise; //The song promise for fetching

    $scope.init = function(songID, userID) {
        $scope.songID = songID;
        $scope.userID = userID;
        $scope.songPromise = $http({
            method: "post",
            url: fetchSong,
            data: {
                song_id: $scope.songID
            },
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function(successResponse) {
            console.log('Successfully fetched song');
            console.log(successResponse);
            var song = successResponse.data;
            $scope.songID = song.song_id;
            $scope.songName = song.song_name;
            $scope.songType = song.song_type;
            $scope.songEmbed = song.song_embed;
            $scope.soundcloud = song.song_embed;
        }, function(errorResponse) {
            console.log('Error fetching');
            $scope.songID = null;
        });
    };
}]);

我知道这是异步性质的问题,因为当我在歌曲控制器的开头添加这一行时:

$scope.soundcloud = "https://soundcloud.com/jshigley/shine";

它工作得很好.我还注意到,当我发送指令中出现的播放/暂停按钮时,我收到"HTTP 404 Not Found"的多个控制台错误,这让我相信它正在尝试查找未定义网址的跟踪

因为它是一个div指令而不是一个函数调用,所以我不能使用promises,比如将一个然后链接到我的$ scope.songPromise.我曾经想过把它放到一个控制器中让控制器执行类似$ timeout的操作5秒钟,但我不认为这会延迟DOM的执行.

soundcloud URL最终会被加载,但在plangular指令的眼中它仍未定义(我实际上遇到了很多这些问题,加载范围和指令的时机不好).任何Angular Wizards都愿意教我如何驯服AngularJS的异步性质？

Answer 1

您可以在自定义指令中使用 $watch 来监视 url 属性何时更改。在

    link: function(scope, el, attr) {

改变自

if (src) {
    resolve({ url: src, client_id: client_id }, function(err, res) {
      if (err) { console.error(err); }
      scope.$apply(function() {
        scope.track = createSrc(res);
        if (Array.isArray(res)) {
          scope.tracks = res.map(function(track) {
            return createSrc(track);
          });
        } else if (res.tracks) {
          scope.playlist = res;
          scope.tracks = res.tracks.map(function(track) {
            return createSrc(track);
          });
        }
      });
    });
  }

到

 scope.$watch('attr.plangular', function(newVal) {

    resolve({ url: attr.plangular, client_id: client_id }, function(err, res) {
      if (err) { console.error(err); }
      scope.$apply(function() {
        scope.track = createSrc(res);
        if (Array.isArray(res)) {
          scope.tracks = res.map(function(track) {
            return createSrc(track);
          });
        } else if (res.tracks) {
          scope.playlist = res;
          scope.tracks = res.tracks.map(function(track) {
            return createSrc(track);
          });
        }
      });
    });
 }, true);

如果您不想更改指令，那么您可能需要仅在获取 url 时才使用 ng-if 加载该 plangular div。

<div plangular="{{soundcloud}}" ng-if="haveurl">

并在角度代码中：

}).then(function(successResponse) {
        console.log('Successfully fetched song');
        console.log(successResponse);
        $scope.haveurl = true;