Просмотр не сбор данных от службы через контроллер

Question

Возникли проблемы с загрузкой внешнего файла JSON и отображением его содержимого на моем экране. Я включил мой взгляд, контроллер и код служб. Что мне нужно изменить?

view.html

<div ng-controller='BaseCtrl'>
    <table class="table table-hover">
        <tbody>
           <tr class="tr-sep" ng-repeat="example in examples" ng-click="showUser(example)">
              <td>{{example.name}}</td>
              <td>{{example.type}}</td>
              <td>{{example.size}}</td>
           </tr>
        </tbody>
    </table>
</div>

controller.js

'use strict';

angular.module('projyApp')
  .controller('BaseCtrl', function ($scope, data) {
    $scope.examples = data.getAllExamples();

    $scope.showUser = function(example) {
        window.location = '#/user/' +example.size;
    };

  });

service.js

'use strict';

angular.module('projyApp')
  .service('data', function data() {
        var examples;

        var getAllExamples = function () {

            $http.get("../../TestData/Examples.json").success($scope.examples = data.examples);
        };

  });

Answer 1

Ваш сервисный код неверен. Я вижу следующие проблемы:

• Вы создаете локальную переменную getAllExamples это не доступно извне службы;
• Вы используете $http сервис, но эта зависимость не выражена в конструкторе сервиса;
• Вы пытаетесь обновить область из службы, но она недоступна оттуда. Плюс $scope переменная даже не определена внутри служебного кода.

Вот как может выглядеть ваш сервис:

.service('data', function($http) {
    this.getAllExamples = function(callback) {
        $http.get("../../TestData/Examples.json")
            .success(function(data) {
                if (callback) callback(data.examples);
            });
        };
});

И код вашего контроллера будет выглядеть так:

.controller('BaseCtrl', function ($scope, data) {
    data.getAllExamples(function(examples) {
        $scope.examples = examples;
    });

    $scope.showUser = function(example) {
        window.location = '#/user/' +example.size;
    };
});

Вы можете отказаться от обратного вызова в getAllExamples функционировать и работать напрямую с $http.getвернул обещание, но это немного сложнее.

Обновление Добавлен скрипт Plunker для иллюстрации кода выше.

Answer 2

Определение основного модуля должно выглядеть так:

angular.module("projyApp",[/*dependencies go here*/]);

Сервис должен выглядеть так

//this use of module function retrieves the module
//Note from comments in angular doc: This documentation should warn that "angular.module('myModule', [])" always creates a new module, but "angular.module('myModule')" always retrieves an existing reference.)
angular.module('projyApp')
  .service('dataService', [/*dependencies,*/function() {
        var service = {
            examples:[],
            getAllExamples = function () {

                $http.get("../../TestData/Examples.json").success(function(returnedData){examples = returnedData});
            }
       }
       return service;
  });

Контроллер должен выглядеть так:

angular.module('projyApp')
  .controller('BaseCtrl', function ($scope, dataService) {
    $scope.examples = [];

    $scope.showUser = function(example) {
        window.location = '#/user/' +example.size;
    };
    $scope.$watch(function(){return dataService.examples}, function(newVal,oldVal) {$scope.examples = newVal});

  });

Также вы можете добавить

debugger;

в строке для запуска Chrome на разрыв (как точка останова, но без необходимости копаться в скриптах во время выполнения), пока открыта панель отладки (F12)

Answer 3

Вы должны использовать обратный вызов вместо назначения scope в вашей службе данных. Делая это, вы можете использовать эту функцию в нескольких контроллерах, присваивая значения соответствующим scopes,

Служба данных

  var getAllExamples = function (callback) {

            $http.get("../../TestData/Examples.json").success(function(data) {
                if (typeof callback === "function") callback(data);
            });
   };

контроллер

data.getAllExemples(function(data) {
    $scope.examples = data;
});

РЕДАКТИРОВАТЬ

Другое, что создать объект обещания.

Служба данных

  var getAllExamples = function () {

            return $http.get("../../TestData/Examples.json");
   };

контроллер

var promise = data.getAllExemples();

promise.then(function(data) {
   $scope.examples = data;
});

РЕДАКТИРОВАТЬ 2

В вашем сервисе вам нужно вернуть свои функции

angular.module('projyApp')
  .service('data', function data() {
        var examples;

     return {
            getAllExamples: function () {

                 $http.get("../../TestData/Examples.json").success(...);

            }
};

  });