Не удалось привязать данные, отправленные с контроллера для просмотра angular.js

Мое приложение в настоящее время состоит из 3 небольших частей службы, которые делают http звонок в .json файл, который получает данные из службы и отправляет их на просмотр. Когда я жестко кодировал данные в своем сервисе, он работал хорошо.Не удалось привязать данные, отправленные с контроллера для просмотра angular.js

Когда я заменил данные жесткого кодирования на файл .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} 
    ] 
}

источник

2015-02-21 Ahmad Elmoualem

Обновленный plunker, все еще работает нормально ... –

я сделал обновить код в соответствии с вашим ответом, я все еще получаю данные в консоли, как и раньше, но, что я заметил, что до того, как мой список получит только один пустой элемент, теперь после обновления кода в соответствии с вашими я имею 5 пустых элементов, я имею в виду, что нет имени, ничего не начертано, просто элемент списка –

Извините, забудьте упомянуть, что я также обновляю свой шаблон с помощью вашего кода {{vm.items | json}}, и я получил все данные в формате json. просто нет данных в моем списке. –

Возможно, что-то не так с вашими данными, потому что следующее работает отлично с поддержкой 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

источник

2015-02-21 20:05:41

Ну, с одной стороны, вы должны ввести $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, вы не можете ссылаться на область действия только из свойств шаблона в области. Таким образом, вы должны изменить эту строку:

<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 во всем шаблоне. Я не смотрел внимательно на остальных.)

--EDIT--

Я извиняюсь. Я не заметил вашего ng-controller="itemsCtrl as vm" наверху. Так что это не может быть ответом на вашу проблему в конце концов. Я собираюсь оставить этот ответ здесь, однако, поскольку по крайней мере один человек уже нашел это полезным.

Я никогда не использую функцию «контроллер как», но мне интересно, может быть, вы не должны делать var vm = this. Кажется, не должно быть проблем с переменным охватом, но я думаю, что я был бы осторожен в том, чтобы именовать переменную в обоих местах.

Попробуйте добавить обработчик .error к вашему звонку $http? Возможно, это скажет вам, что-то не так (например, не удается найти файл).

источник

2015-02-21 18:24:34 tandrewnichols

Понял. См. Мое предыдущее редактирование. – tandrewnichols

Здравствуйте, у меня был .erro, и ошибок не было, также я регистрирую данные, получаемые из .json правильно –

К сожалению, если ответ глупо, но я просто обновил свой .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} 
]

источник

2015-02-22 13:07:33

Не удалось привязать данные, отправленные с контроллера для просмотра angular.js

ответ

Смежные вопросы