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

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 注入您的控制器。 angular 的某些先前版本确实允许您互换使用 this 和 $scope，因此也许说 var vm = this 并分配给 vm 在某些版本的 angular，但我建议您像这样设置您的控制器：

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");
    }
};

但即使在您的 angular 版本中，this 是 $scope 的可行替代品，您也无法从模板中引用范围本身 - 只有属性 在范围内。所以你需要改变这一行：

<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"。所以这可能根本不是你问题的答案。不过，我暂时将这个答案留在这里，因为至少有一个人已经发现它有用。

我从不使用 "controller as" 功能，但我想知道您是否不应该使用 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
}]

相关插件在这里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

Failed to bind data sent from a controller to view angular.js

javascript

json

angularjs

ionic