5

ここで他の $rootScope:infdig の質問を見てみましたが、それを本当によく説明してくれたり、理解したりするものは見つかりませんでした。AngularJs ドキュメントと同じです。誰かが助けてくれることを願っています。

$scope で作成した関数があります。これは、1 つのパラメーターを取り、API GET 要求を呼び出し、「id」と「name」だけで json オブジェクトを返します。次に、この関数は、オブジェクトの名前を、それを呼び出したディレクティブに返します。

関数はディレクティブから呼び出されますが、一度呼び出されると、これらの "rootScope:infdig" が毎秒 100 回発生するエラーでスタックします。また、ディレクティブは、返された「名前」のテキストをレンダリングしません。後でコンソールに「名前」を記録するため、http呼び出しが機能することはわかっています。

エラー画面

これが私のコントローラーです：

owlyfm.controller('landingPageController', [ "$scope", "$log", "$http", "$location", "apiUrlsService", function ($scope, $log, $http, $location, apiUrlsService) {

 $http.get("https://api.backand.com:443/1/objects/Albums?pageSize=3&pageNumber=1&deep=true&relatedObjects=true")
    .success( function(result){
        $scope.featuredAlbums = result.data;
        //$log.info($scope.featuredAlbums);
    })
    .error( function(data, status){
        $log.error(data);
    });

    $scope.getAlbumArtist = function(artistId){

      $http.get("https://api.backand.com:443/1/objects/Artists/" + artistId)
        .success(function(result){
          var artistsName = result.name;
          $log.info(artistsName);
          return artistsName;
        });
    }
}]);

ディレクティブを作成した場所は次のとおりです。

owlyfm.directive("featuredAlbum", function(){

return{
    restrict: 'E',
    templateUrl: 'directives/featuredAlbum.html',
    scope: {
        albumObject: "=",
        getAlbumArtistFunction: "&"
    }
  }
});

ここで、ビューでディレクティブを呼び出します

<div class="row fluid-container" >
    <featured-album ng-repeat="featuredAlbum in featuredAlbums" album-object="featuredAlbum" get-album-artist-function="getAlbumArtist(album)" class="col-md-4" ></featured-album>
</div>

そして、ここにディレクティブ自体があります：

    <div class="featuedAlbum">

        <div>
            <img class="img-responsive" ng-src=" {{albumObject.albumArtUrl}} "/>
        </div>

        <h4>{{ albumObject.name }}</h4>
        <h5>{{ getAlbumArtistFunction( { album: albumObject.Artists } ) }}</h5>
        <h6>{{ albumObject.releaseDate }}</h6>

    </div>

私がやっていること

まとめると、API を呼び出してアルバム オブジェクトを取得しています (ところで、「Backand」を使用しています)。このアルバム オブジェクトを取得したら、受け取ったデータで<img>と<h>タグをレンダリングします。それはうまくいっています。

アルバム オブジェクトには、ID、名前、日付、imgUrl、および "Artists" (アーティストの ID のみ) があります。次に、この「アーティスト」ID を使用して別の呼び出しを行い、関連付けられている実際の Artist オブジェクトを取得します。ここで問題が発生します。

問題

エラーのループを引き起こしているのは、アーティスト オブジェクトの http 呼び出しです。アーティストのjsonオブジェクトを取得していることをログで確認できますが、それをディレクティブに送信しません。

私が研究したこと

ディレクティブの関数で ng-repeat を使用すると問題があることを読みました。ただし、ここでそれが適用される理由と方法を完全には理解していません。また、達成しようとしていることを行うためにそれを変更する方法もわかりません。ここにある他のすべての質問は、私の頭の少し上にあります。

誰かが私を助けることができれば、それは非常にありがたいです.

4

1 に答える 1

1

コメントで述べたように、ビュー内のサーバーからデータを取得する関数を呼び出すことはお勧めできません。これは、一度だけ呼び出す必要がある場合に複数回呼び出すためです。

「featuredAlbum」コンストラクターで設定される「artistName」のプロパティを追加できます。

owlyfm.controller('featuredAlbumController', [ "$scope","$http",function ($scope, $http) { $http.get("https://api.backand.com:443/1/objects/Artists/" + $scope.artistId) .success(function(result){ $scope.artistName = result.name; }); }]);

したがって、 $http は、コントローラーの初回実行時に一度だけ呼び出されます。

于 2016-01-24T08:38:24.010 に答える