Question

我的应用程序目前只有3个小部件服务，使http调用.json文件控制器从服务中恢复数据并将其发送到视图。当我在我的服务中对数据进行硬编码时，它运行良好。

当我将硬编码数据替换为.json文件时，它会停止工作，但我将其记录在控制器中，并确保从.json文件中正确查询数据。

这是简单的控制器：

(function (){
    'user strict';
    angular.module('myApp').controller('itemsCtrl',['$state','myappApi', itemsCtrl]);
    //constructor function
    function itemsCtrl($state, myappApi){
        var vm = this;

        myappApi.getItems(function(data){
            vm.items = data;
        });
        //vm.items = data;

        vm.selectItem = function(id){
            myappApi.setItemId(id);
            $state.go("app.item-detail");

        }
    };
})();

模板代码：

<ion-view ng-controller="itemsCtrl as vm">
    <ion-content class="has-header">
        <div class="list">
            <a class="item item-icon-right" ng-repeat="item in vm.items" ng-click="vm.selectItem(item.id)">
                <div class="row">
                    <div class="col item-thumbnail-left">
                        <img ng-src="vas-images/{{item.name}}.jpg">
                    </div>
                    <div class="col col-center">
                        <h3 class="blue-font">{{item.name}}</h3>
                        <p>{{item.desc}}</p>
                    </div>
                    <div class="col col-center">
                        <h4 class="blue-font-alt">Price:{{item.price}}$</h4>
                    </div>
                </div>
                <i class="icon ion-chevron-right icon-accessory"></i>
            </a>
        </div>
    </ion-content>
</ion-view>

服务代码：

(function (){
    'user strict';
    angular.module('myApp').factory('myappApi',['$http', myappApi]);

    function myappApi($http){

        //function to get all the items.
        function getItems(callback){
            $http.get("app/items/data.json")
            .success(function(data){
                callback(data);
            });
        }

        //function to set the item ID.
        function setItemId(itemId){
            currentItemId = itemId;
        }

        return{
            getItems: getItems,
            setItemId: setItemId
        };
    };
})();

.json文件：

{
    "items" : [
    {"id":1005, "name":"item-one", "desc":"some text here and there", "price":100},
    {"id":1006, "name":"item-two", "desc":"some text here and there", "price":500},
    {"id":1007, "name":"item-three", "desc":"some text here and there", "price":600},
    {"id":1008, "name":"item-four", "desc":"some text here and there", "price":50},
    {"id":1009, "name":"item-five", "desc":"some text here and there", "price":20},
    {"id":1010, "name":"item-six", "desc":"some text here and there", "price":660}
    ]
}

Answer 1

嗯，首先，你应该将$scope注入你的控制器。某些先前版本的角度允许您互换使用this和$scope，因此可能会说var vm = this并分配给vm会在某些版本的角度中有效，但我建议像这样设置你的控制器：

angular.module('myApp').controller('itemsCtrl',['$scope', '$state','myappApi', itemsCtrl]);
//constructor function
function itemsCtrl($scope, $state, myappApi){
    myappApi.getItems(function(data){
        $scope.items = data;
    });

    $scope.selectItem = function(id){
        myappApi.setItemId(id);
        $state.go("app.item-detail");
    }
};

但即使在您的角度版本this是$scope的可行替代品，您也无法从模板中引用范围本身 - 仅范围 / em>的。所以你需要改变这一行：

<a class="item item-icon-right" ng-repeat="item in vm.items" ng-click="vm.selectItem(item.id)">

到

<a class="item item-icon-right" ng-repeat="item in items" ng-click="selectItem(item.id)"> <div class="row">

即。 item in items代替item in vm.items和selectItem(item.id)代替vm.selectItem(item.id)。由于vm不是范围内的属性，因此无法在模板中访问它。

（顺便说一下，你应该在整个模板中替换vm.whatever。我没有仔细查看其余部分。）

- 编辑 -

我道歉。我没注意到你的ng-controller="itemsCtrl as vm"在顶部。所以这可能不是你问题的答案。不过，我现在要在这里留下这个答案，因为至少有一个人已经发现它很有用。

我从不使用“控制器为”功能，但我想知道你是不是应该做var vm = this。看起来似乎不应该存在变量范围问题，但我想我会谨慎地在两个地方命名变量同样的东西。

您是否尝试在.error电话中添加$http处理程序？也许这会告诉你是否出现问题（例如找不到文件）。

Answer 2

您的数据可能有问题，因为以下内容适用于支持JSON文件。

<强> HTML

<body ng-controller="itemsCtrl as vm">
  {{ vm.items | json }}
</body>

<强>的JavaScript

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

myApp.controller('itemsCtrl', function(myappApi){
  var vm = this;
  myappApi.getItems(function(response){
    vm.items = response.data;
  });
});

myApp.factory('myappApi', function myappApi($http){
  return {
    getItems: function(callback){
      $http.get('data.json').then(callback).catch(callback);
    }  
  };
});

<强> JSON

[{
  "name": "name",
  "desc": "desc",
  "price": 100
}]

此处相关的plunker http://plnkr.co/edit/NY2Un3

Answer 3

很抱歉，如果答案很愚蠢但我刚刚将.json文件更新为

[
{"id":1005, "name":"item-one", "desc":"some text here and there", "price":100},
{"id":1006, "name":"item-two", "desc":"some text here and there", "price":500},
{"id":1007, "name":"item-three", "desc":"some text here and there", "price":600},
{"id":1008, "name":"item-four", "desc":"some text here and there", "price":50},
{"id":1009, "name":"item-five", "desc":"some text here and there", "price":20},
{"id":1010, "name":"item-six", "desc":"some text here and there", "price":660}
]

无法绑定从控制器发送的数据以查看angular.js

3 个答案: