3

刚开始使用 AngularJS。尝试构建一个单页应用程序来显示我的漫画的幻灯片/页面，一次一个。

数据是从 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 回答