1

我是 AngularJS 的新手，但非常渴望掌握它，所以请忘记我的无知。我在制作基本博客时遇到两个问题：

问题 #1：我有一个使用 $http 并完美接收 JSON 的控制器。

这是 app.js：

angular.module('blogApp', []).config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/home', {
    templateUrl : 'home.html'
}).when('/post/:postId', {
    templateUrl : 'post.html',
    controller : postCtrl
}).otherwise({
    redirectTo : '/home'
});
}]);

这是controller.js：

function postCtrl($scope, $http, $routeParams) {
$http.get('post.php?id=' + $routeParams.postId).success(function(data) {
    $scope.post = data;
});

$scope.description = $scope.post.meta_description;  /*I can't access this value*/

}

这是 $scope.post 在使用 #/post/123 时收到的 JSON：

[
    {
        'id':'123',
        'title':'title of the post',
        'date':'2013-06-14',
        'content':'This is the content of the post.<br>She had a yellow house.',
        'meta_description':'description of my first post.'
    }
]

问题是在controller.js 中，我无法访问$scope.post.meta_description。我也尝试过使用 $scope.post[0].meta_description、data.post.meta_description 和 data.post[0].meta_description，但没有得到肯定的结果。

问题 #2：在 post.html 中，我有这段代码

<div>
    <h1>{{post[0].title}}</h1>
    <h2>Published on {{post[0].date}}</h2>
    {{post[0].content}}
</div>

我练习了完整的 AngularJS 教程，应该使用 {{post.title}} 但 AngularJS 不打印任何内容。为了解决这个问题，我使用 {{post[0].title}}。为什么会这样？

4

3 回答 3

1

所以你需要做类似的事情

ng-repeat 在帖子中为您的问题 2 发帖。

对于问题 1，我认为您需要进行实际的 http 调用。

$scope.post = // 你的函数调用来获取数据。

于 2013-06-14T18:58:21.953 回答
1

第一

$scope.description = $scope.post[0].meta_description;

请注意服务器返回Array的单个项目类型为Hash.

我想这是你麻烦的线索。

于 2013-06-14T19:00:47.490 回答
1

结论：对于问题 #2。有两种类型的 JSON。

a) JSONObject像这样的单行：

{
    'id':'123',
    'title':'my house'
}

b) JSONArray像这样的单行：

[
    {
       'id':'123',
        'title':'my house'
    }
]

看到括号了吗？或者像其他 JSONArray 一样：

[
    {
       'id':'123',
        'title':'my house'
    },
    {
       'id':'124',
       'title':'my car'
    }
]

对于 JSONObjects，您必须在模板中使用 {{post.title}}。

<div>
    {{post.title}}
</div>

{{post[0].title}} 会给你一个错误，因为 data 不是一个数组。它不使用括号。

使用 JSONArrays（一行或多行），您可以在模板中使用 ng-repeat，例如：

<div ng-repeat="post in post">
    {{post.title}}
</div>

或者，您也可以直接访问特定行：

<div>
    {{post[0].title}}
    <br>
    {{post[1].title}}
</div>

对于问题 #1，您可以使用此处解释的内容：

AngularJS 教程中的第 11 步（$resource）

但是，我发现进行一次更改更容易；这是我以前的代码：

function postCtrl($scope, $http, $routeParams) {
    $http.get('post.php?id=' + $routeParams.postId).success(function(data) {
        $scope.post = data;
    });

    $scope.description = $scope.post.meta_description;  /*I can't access this value*/
}

问题是 $scope.post 只存在于 $http.get 内部的函数中；它就像一个无法从函数外部访问的私有变量。

因此，比使用 $resource 更简单的解决方案是将 $scope.description 移动到 $http.get 中。

function postCtrl($scope, $http, $routeParams) {
    $http.get('post.php?id=' + $routeParams.postId).success(function(data) {
        $scope.post = data;
        $scope.description = data.meta_description;
    });
}
于 2013-06-16T04:27:54.613 回答