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

Question

我有一个需要 soundcloud url 的 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;
        });
    };
}]);

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

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

它工作得很好。我还注意到，当我向指令中确实出现的播放/暂停按钮发送垃圾邮件时，我收到多个控制台错误“未找到 HTTP 404”，这让我相信它正在尝试查找未定义的 url

因为它是一个 div 指令而不是函数调用，所以我不能使用 promise ，例如将 then 链接到我的 $scope.songPromise。我想过将它放入 Controller 中并让 Controller 执行类似 $timeout 的操作 5 秒，但我认为这不会延迟 DOM 的执行。

soundcloud URL 最终会被加载，但在 planular 指令的眼中它仍然是未定义的(我实际上遇到过很多这样的问题，加载范围和指令的时机不佳)。有 Angular 高手愿意教我如何驾驭 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 加载该平面 div。

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

在 Angular 代码中:

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