javascript - 带有外部参数 Angular 的 Ajax

Question

我是 Angular 新手，我愿意做的是将我以前在 jquery 中编写的一段代码替换为 angularjs。

目标是从 span 元素中获取一个字符串，将其一分为二，然后将这两个字符串作为 GET 请求中的参数传递。

我正在努力学习最佳编码实践并提高自己，因此随时欢迎任何类型的评论。

jquery 中的工作代码:

//Get Song and Artists  

setInterval(function () {
var data = $('#songPlaying').text();
var arr = data.split('-');

var artist = arr[0];
var songTitle = arr[1];

//Request Lyrics

$.get('lyricsRequester.php', { "song_author": artist, "song_name" : songTitle}, 
function(returnedData){
     console.log(returnedData);
    $('#refreshLyrics').html(returnedData);
});
},10000); 

Angular 中的代码

    var app = angular.module("myApp", []);


app.factory('lyricService', function($http) {
   return {
        getLyrics: function($scope) {
        //$scope.songArr = $scope.currentSong.split('-'); <-- **undefined currentSong**
        //$scope.artist = $scope.songArr[0];
        //$scope.songTitle = $scope.songArr[1];
             return 
             $http.get('/lyricsRequester.php', {
        params: {
            song_author: $scope.artist,
            song_name: $scope.songTitle
        }
     }).then(function(result) {
            return result.data;
                        });
        }
   }
});

app.controller('lyricsController', function($scope, lyricService, $interval) {
   $interval(function(){ 

        lyricService.getLyrics().then(function(lyrics) {
            $scope.lyrics = lyrics; <-- **TypeError: Cannot read property 'then' of undefined**
            console.log($scope.lyrics);
        }); 

        }, 10000);
});

index.html(只是一部分)

<div class="col-md-4" ng-controller="lyricsController">{{lyrics}}</div>
    <div class="col-md-4"><h3><span id="currentSong" ng-model="currentSong"></span></h3><div>

Answer 1

在与换行符一起使用时，您需要小心使用 return 语句，在这些行中:

return 
$http.get('/lyricsRequester.php', 

如果不这样做，JS会自动在你的return后面加一个分号，函数会返回undefined。

将 $http.get 语句移动到与 return 语句相同的行。

return $http.get('/lyricsRequester.php', ...

引用以下文档:

MDN return statement

Automatic Semicolon Insertion

---

至于你的第二个问题，你的 $scope 并不是真正注入(inject)到你的服务中的东西(比如 $http)。范围可用于 Controller 。您需要稍微重构您的代码才能使事情正常进行。

例如。您的 getLyrics 函数可以将歌曲作为参数。然后在您的 Controller 中调用 lyricsService.getLyrics(someSong)。范围访问和操作仅在您的 Controller 中完成。

app.factory('lyricService', function($http) {
   return {
        getLyrics: function(song) {
        var songArr = song.split('-');
        var artist = songArr[0];
        var songTitle = songArr[1];
        return $http.get('/lyricsRequester.php', {
          params: {
              song_author: artist,
              song_name: songTitle
          }
     }).then(function(result) {
            return result.data;
                        });
        }
   }
});
app.controller('lyricsController', function($scope, lyricService) {
    $scope.currentSong = 'Judas Priest - A Touch of Evil';

   $interval(function(){ 
        lyricService.getLyrics($scope.currentSong).then(function(lyrics) {
            $scope.lyrics = lyrics;
            console.log($scope.lyrics);
        }); 

        }, 10000);
});

---

您还有一些其他问题，例如在您的 span 上使用 ng-model。 ng-model 是一个 Angular Directive(指令)，与表单元素(输入、选择等)结合使用，而不是您拥有的跨度。因此，您可能希望将其更改为输入字段。