2

无法加载外部 json 文件并将其内容显示在我的视图中。我已经包含了我的视图、控制器和服务代码。我需要改变什么？

视图.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>

控制器.js

'use strict';

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

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

  });

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

  });
4

3 回答 3

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脚本来说明上面的代码。

于 2013-08-22T17:50:25.127 回答
0

主模块定义应如下所示：

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;

只要调试面板打开 (F12)

于 2013-08-21T23:30:24.627 回答
0

您应该使用回调而不是分配给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(...);

            }
};

  });
于 2013-08-22T00:02:36.197 回答