在Angular JS中将Javascript对象转换为字符串

我是angularJS的新手，下面的代码有一些问题。基本上，我试图实现的是搜索spotify API中的一个术语并检索给我的第一个播放列表，然后获取播放列表的URI并将其连接到一个嵌入url以显示在页面中

我似乎无法使$scope.spotifySearch对象以字符串格式进入$scope.playliURI范围。任何帮助都将不胜感激

app.controller('MainCtrl', function ($scope, $sce, Spotify) {

  $scope.spotifySearch = Spotify.search('Top 40', 'playlist').then(function (data) {
    return (data.playlists.items[0].uri);
  });

  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $scope.playlisturlfragment = "https://embed.spotify.com/?uri=";
  $scope.playlisturi = $scope.spotifySearch;
  $scope.playlisturl = {src:$scope.playlisturlfragment+$scope.playlisturi}

});

---

您正在为

spotifySearch

分配承诺，我认为您需要的是搜索返回的

uri

解决这个问题基本上有两种方法

解决承诺时，将值分配给

playliURL

更改

spotifySearch

时，将值分配给

playlurl

这是第一种方法

 $scope.playlisturlfragment = "https://embed.spotify.com/?uri=";
 Spotify.search('Top 40', 'playlist').then(function (data) {
     $scope.playlisturl = {src:$scope.playlisturlfragment+data.playlists.items[0].uri}
  });

另一种方法是观察

spotifySearch

的变化

 $scope.playlisturlfragment = "https://embed.spotify.com/?uri=";
 Spotify.search('Top 40', 'playlist').then(function (data) {
     $scope.spotifySearch = data.playlists.items[0].uri;
  });

 $scope.$watch('spotifySearch',function(value) {
     if(!value) return;
     $scope.playlisturl = {src:$scope.playlisturlfragment+value};
 });

---

将承诺分配给

$scope.spotifySearch

，而不是实际数据（

$http

返回承诺）。相反，您可以这样做：

app.controller('MainCtrl', function ($scope, $sce, Spotify) {

    $scope.playlisturlfragment = "https://embed.spotify.com/?uri=";
    $scope.playlisturl = {
        src: ""
    }

    $scope.spotifySearch = Spotify.search('Top 40', 'playlist').then(function (data) {
        // use the callback to assign the uri to your object
        $scope.playlisturl.src = $scope.playlisturlfragment + data.playlists.items[0].uri;
    });

});

---

对请求使用承诺。这个承诺是异步的，很快就会返回值，然后就不起作用了。为此，请将回调函数用作：

app.controller('MainCtrl', function ($scope, $sce, Spotify) {

    $scope.trustSrc = function(src) {
        return $sce.trustAsResourceUrl(src);
    };

    $scope.init = function(){
        $scope.search(function(uri){
            $scope.playlisturlfragment = "https://embed.spotify.com/?uri=";
            $scope.playlisturl = {src:$scope.playlisturlfragment + uri};
        });
    };

    $scope.search = function(callback){
        $scope.spotifySearch = Spotify.search('Top 40', 'playlist').then(function (data) {
            callback(data.playlists.items[0].uri);
        });
    };
});

---

运行init方法查看此示例

FYI：我用于搜索spotify API的库是有角度的spotify此问题暗示您需要JSON，但我认为您需要的是URL查询参数。在

中。然后（..

函数回调您可以将uri分配给您的

$scope.playliuri

我认为会对您有所帮助。这允许angular修改url。也可能是

ng src

@ryanyyu我已经在使用ng src了，但是我得到的只是[object object]为什么要添加手表，而不只是在回调中更新

$scope.playliURL

？还可能需要

$apply

第一种方法非常有效，感谢您的帮助，我现在意识到我的错误所在：）我会选择第一个one@charlietfl将逻辑与DOM相关的东西分开很好。在指令的控制器中执行Spotify.search，并在链接中更新DOM。我看一下你的例子。你使用$watch等待承诺的返回。对我来说，这是ant模式。在开发大型项目中使用$watch可能会损害代码，如果optment改变了代码其他部分的模型。回调函数保证了应用程序中唯一的组件。在这种情况下，你需要两个组件。你该怎么做？为$watch创建其他变量？将承诺转换为回调对我来说是一种蚂蚁模式。它隐藏了承诺的好处。我看一下你的例子。你使用$watch等待承诺的回归。对我来说，这是ant模式。如果开发更改了代码其他部分的模型，在开发大型项目中使用$watch可能会损害代码。回调函数保证应用程序中的唯一组件。在这种情况下，你需要两个组件。你怎么做？为$watch创建其他变量？