Question

我使用Plangular这是一个使用Angular JS和Soundcloud API播放一些歌曲的指令。当然它需要Soundcloud jdk，angular和它的js。

我尝试以这种方式通过ajax在div中动态加载外部内容：

$(document).ready(function(){
    $("body").on('click', '#chart_best',function(){
        $.ajax({url: "chart_best.html", success: function(result){
            $(".container").html(result);
        }});
    });
    $("body").on('click', '#chart_best_indie_pop',function(){
        $.ajax({url: "chart_best_indie_pop.html", success: function(result){
            $(".container").html(result);
        }});
    });
    $("body").on('click', '#chart_best_punk',function(){
        $.ajax({url: "chart_best_punk.html", success: function(result){
            $(".container").html(result);            
        }});
    });
});

新内容已正确加载，但播放器简单无效。听起来它需要在ajax调用之后重新加载JS。我尝试使用.live，但它不起作用。还尝试删除脚本并通过$ .getScript（）重新加载它们，但播放器仍无法正常工作。我在这个项目中复制了这个问题：https://codepen.io/GoingSolo/project/editor/DNVyJD/如果点击左侧列表加载新内容，播放器就会停止工作。在我的ajax调用之后，哪个是重新加载Plangular需要工作的所有脚本的最佳方法？

Answer 1

对于任何对我如何解决这个问题感兴趣的人，基本上，正如建议的那样，我将我的ajax调用改为angularjs $http，如下所示：

gsplayer.controller('SearchBar', function($scope, $http) {

    $scope.chart_best = function() {
        $scope.dataLoaded = false;
  $http.get("../themes/replay/chart_best.php").then(function (response) {
      $scope.myData = response.data;
      $scope.chartTitle = "Top 20 Tracks";
      $scope.dataLoaded = true;
  });
  };

    $scope.chart_best_indie_pop = function() {
        $scope.dataLoaded = false;
  $http.get("../wp-content/themes/replay/chart_best_indie_pop.php").then(function (response) {
      $scope.myData = response.data;
      $scope.chartTitle = "Best Indie Pop Tracks";
      $scope.dataLoaded = true;
  });
  };

    $scope.chart_best_punk = function() {
        $scope.dataLoaded = false;
  $http.get("../wp-content/themes/replay/chart_best_punk.php").then(function (response) {
      $scope.myData = response.data;
      $scope.chartTitle = "Best Punk Tracks";
      $scope.dataLoaded = true;
  });
  };    
});

然后我必须重写三个php页面，以便以json格式检索所需数据并访问myData。

ajax调用后重新加载脚本

1 个答案: