Question

我在角度js中编写了一个非常简单的测试应用程序，并尝试显示存储在json服务器上的数据以显示在视图中。

db.json如下：

{
  "examples": [
    {
      "id": 0,
      "name": "example 0",
      "description": "Example 0 description."
    },
    {
      "id": 1,
      "name": "example 1",
      "description": "Example 1 description."
    }
  ]
}

控制器如下：

angular.module('my_app')

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) {

    $scope.example = exampleFactory.query({
        })
        .$promise.then(
            function (response) {
                var examples = response;
                $scope.message = examples;
            },
            function (response) {
                $scope.message = "Error: " + response.status + " " + response.statusText;
            }
        );

}])

工厂如下：

.factory('exampleFactory', ['$resource', 'baseURL', function ($resource, baseURL) {

        return $resource(baseURL + "examples/:id", null, {
            'update': {
                method: 'PUT'
            }
        });
}])
;

观点如下：

<p>Test outside repeat: {{message}}</p>

<ul>
   <li ng-repeat="example in examples">
       <p>Test in repeat: {{message}}</p>
       <p>{{example.name}}</p>
       <p>{{example.description}}</p>
    </li>
 </ul>

这里有趣的是数据是由工厂返回的。在上面的例子中，第一个测试（在ng-repeat之外）返回完整集。但是，ng-repeat内部没有任何内容显示出来。

我使用服务使用略有不同的安排，但它似乎没有使用工厂。

有没有人知道为什么会这样，他们会把我说得对吗？

由于燕姿

Answer 1

我认为您忘了分配$scope.examples，因此ng-repeat没有数据要循环：

angular.module('my_app')

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) {

    $scope.example = exampleFactory.query({
        })
        .$promise.then(
            function (response) {
                var examples = response;
                $scope.message = examples;
                $scope.examples = examples.examples; // I may be reading the JSON wrong here.
            },
            function (response) {
                $scope.message = "Error: " + response.status + " " + response.statusText;
            }
        );

}])

Answer 2

我建议使用工厂，因为您可以在工厂返回之前获取工厂内的方法。它是揭示模块模式，如果您感兴趣的JavaScript Design Patterns

，请在此处阅读

angular
  .module('my_app')
  .controller('ExampleController', ['$scope', 'exampleFactory',
    function($scope, exampleFactory) {
      function getMessageList() {
        exampleFactory
          .getMessages()
          .then(function(messages) {
            $scope.examples = messages;
          })
          .catch(function(response) {
            $scope.message = "Error: " + response.status + " " + response.statusText;
          });
      }
      getMessageList();

    }
  ])
  .factory('exampleFactory', ['$http', 'baseURL',function($http, baseURL) {
      function getMessages() {
        return $http
          .get(baseURL)
          .then(function(jsonResp) {
            return jsonResp.data;
          })
          .catch(function(error) {
            //handle error if needed
            console.log(error);
          });
      }
      return {
        getMessages: getMessages
      };
    }
  ]);

<p>Test outside repeat: {{examples}}</p>

<ul>
  <li ng-repeat="example in examples">
    <p>Test in repeat: {{message}}</p>
    <p>{{example.name}}</p>
    <p>{{example.description}}</p>
  </li>
</ul>

Answer 3

最终通过更改控制器对其进行排序，如下所示：

.controller("ExampleController", function($scope, exampleFactory) {
  exampleFactory.query(function(response) {
      $scope.examples = response;

      $scope.examples.$promise.then(
          function (response) {
              var examples = response;
              $scope.message = examples;
          },
          function (response) {
              $scope.message = "Error: " + response.status + " " + response.statusText;
          }
      );

  });
});

可能有点笨拙，能够进一步减少它会很好但是因为我对这一切都很陌生，所以我现在就用它。

试图通过控制器和工厂以角度访问json-server数据

3 个答案: