Question

我是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}}。为什么会这样？

Answer 1

所以你需要做一些像

这样的事情在你的问题的帖子中发表重复帖子。

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

$ scope.post = //您的函数调用以获取数据。

Answer 2

第一个

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

请注意，服务器返回Array个字项为Hash的单项。

我想这是你麻烦的线索。

Answer 3

结论：对于问题＃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}}会给你一个错误，因为数据不是一个数组。它不使用括号。

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

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

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

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

对于问题＃1 ，您可以使用此处说明的内容：

Step #11 in AngularJS' tutorial ($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更简单的解决方案是在$ http.get中移动$ scope.description。

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

AngularJS - 如何直接从控制器访问$ scope的行/值

3 个答案: