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

修改

另一个是创建一个promise对象。

数据服务

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(...); } }; });

查看不通过控制器从服务收集数据

3 个答案: