3

AngularJS を使い始めたばかりです。コミックのスライド/ページを 1 つずつ表示する単一ページ アプリを作成しようとしています。

データは JSON ファイルから取得され、正しく機能しています。しかし、基本的なバインディングをセットアップしようとすると、Angular がエラーをスローします。何かご意見は..？

HTML

<span ng-bind-html="showCurrentTitle"></span>

JS

var comicsApp = angular.module('comicsApp', ['ngSanitize']);

comicsApp.controller('comicsCtrl', ['$scope', '$http',
  function comicsCtrl($scope, $http) {
    $http.get('/luv-slimline/test/comics.json').success(function(data) {
      $scope.comics = data.comics;
    });

    $scope.showCurrentTitle = function() {
    return $scope.comics[0].title;
}
} //end ComicsCtrl
]);

エラー

TypeError: Object function () { return $scope.comics[0].title; } has no method 'indexOf'

ngSanitize モジュールを取り除くと、エラー メッセージが変わります。

代替エラー

Error: [$sce:unsafe] http://errors.angularjs.org/undefined/$sce/unsafe

ng-bind-html ディレクティブを古いスタイルの口ひげブレースに置き換えると、エラー メッセージが再び変化します。

代替エラー (2)

Error: [$interpolate:interr] http://errors.angularjs.org/undefined/$interpolate/interr?p0=%7B%7BshowCurr…()%7D%7D&p1=TypeError%3A%20Cannot%20read%20property%20'0'%20of%20undefined

助けてください？

乾杯、ダン

4

1 に答える 1

2

あなたが受け取っているエラー、または ng-sanitize または ng-bind-html タグに精通していません。ただし、あなたの JavaScript コードには問題があるように見えます。

var comicsApp = angular.module('comicsApp', ['ngSanitize']);

    comicsApp.controller('comicsCtrl', ['$scope', '$http',
      function comicsCtrl($scope, $http) {

       //so this runs immediately, but . . .
       $http.get('/luv-slimline/test/comics.json').success(function(data) {
          // . . . this is going to happen async, so this value won't be set 
          //before the initial binding occurs
          $scope.comics = data.comics;
        });
    $scope.showCurrentTitle = function() {
    // . . . as a result, comics will be undefined initially.
    return $scope.comics[0].title;
}
} //end ComicsCtrl
]);

http.get の前に $scope.comics の初期値を定義する必要があると思います。何かのようなもの：

$scope.comics = [];
$scope.comics.push({title: "testTitle"});

編集

あなたのコメントに基づいて、showCurrentTitleにバインドするだけの場合 (より意味があるため、 currentTitleに名前を変更します)、 $scope.comics を初期化する必要さえありません。そのコードなしで動作するはずです。

于 2013-10-31T02:02:58.013 に答える