Javascript 试图通过angular中的控制器和工厂访问json服务器数据

我正在用angular 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>

控制员名单如下:

{
  "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>

工厂名称如下：

{
  "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>

意见如下:

{
  "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>

测试外部重复：{{message}



重复测试：{{message}

{{example.name}

{{example.description}}

有趣的是，工厂正在返回数据。在上述示例中，第一个测试（ng重复之外）返回完整集。但是，ng repeat中没有显示任何内容

我使用了一种稍微不同的服务安排来实现这一点，但它没有；我好像没有在工厂里工作

有人知道这是为什么吗？他们能纠正我吗

谢谢

---

Stef

我想您只是忘记了分配

$scope。示例

，因此

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

}])

---

我想您只是忘了分配

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

}])

---

我建议使用工厂，因为在工厂被退回之前，您可以在工厂内获得方法。这是揭示模块模式，如果您感兴趣，请阅读此处

angular
.module（“我的应用程序”）
.controller（'ExampleController'，['$scope'，'exampleFactory'，
功能（$scope，exampleFactory）{
函数getMessageList（）{
示例工厂
.getMessages（）
.then（功能（消息）{
$scope.examples=消息；
})
.catch（函数（响应）{
$scope.message=“错误：”+response.status+“”+response.statusText；
});
}
getMessageList（）；
}
])
.factory（'exampleFactory'，['$http'，'baseURL'，函数（$http，baseURL）{
函数getMessages（）{
返回$http
.get（baseURL）
.then（函数（jsonResp）{
返回jsonResp.data；
})
.catch（函数（错误）{
//如果需要，处理错误
console.log（错误）；
});
}
返回{
getMessages:getMessages
};
}
]);

测试外部重复：{{examples}



重复测试：{{message}

{{example.name}

{{example.description}}

我建议使用工厂，因为在工厂返回之前，您可以在工厂内获得方法。这是揭示模块模式，如果您感兴趣，请阅读此处

angular
.module（“我的应用程序”）
.controller（'ExampleController'，['$scope'，'exampleFactory'，
功能（$scope，exampleFactory）{
函数getMessageList（）{
示例工厂
.getMessages（）
.then（功能（消息）{
$scope.examples=消息；
})
.catch（函数（响应）{
$scope.message=“错误：”+response.status+“”+response.statusText；
});
}
getMessageList（）；
}
])
.factory（'exampleFactory'，['$http'，'baseURL'，函数（$http，baseURL）{
函数getMessages（）{
返回$http
.get（baseURL）
.then（函数（jsonResp）{
返回jsonResp.data；
})
.catch（函数（错误）{
//如果需要，处理错误
console.log（错误）；
});
}
返回{
getMessages:getMessages
};
}
]);

测试外部重复：{{examples}



重复测试：{{message}

{{example.name}

{{example.description}}

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

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

  });
});

---

可能有点笨重，如果能够进一步减少它会很好，但由于我对这一切都很陌生，我现在就用这个。

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

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

  });
});

---

可能有点笨重，如果能进一步减少，那就太好了，但由于我对这一切都很陌生，我现在就用这个。

谢谢2ps-尝试过，但没用-我最终把它分类了-尽可能多地查看下一个回复的详细信息；我无法在这个回复中正确显示代码：-）谢谢2ps-尝试了一下，但没有成功-我最终对它进行了排序-请参阅下一个回复以了解详细信息；我无法在回复中正确显示代码：-）谢谢alphapilgrim-我最终对它进行了排序（见上文）。另外，我使用$resource而不是$http，因此我不会使用您的解决方案，但您的评论非常有用，非常感谢；-）还有，为链接干杯，这是明天的阅读；-）感谢alphapilgrim——我最终将其分类（见上文）。另外，我使用$resource而不是$http，因此我不会使用您的解决方案，但您的评论非常有用，非常感谢；-）还有，为链接干杯，这是明天的阅读；-）