【发布时间】：2017-05-12 02:45:04
【问题描述】：
我是 Angular js 的新手。我使用的是 1.6 版。
我正在尝试使用工厂从本地 json 文件中读取数据以显示信息。我不断收到此错误：
plotFactory.getPlots(...).then(...).error不是函数
我的本地文件结构是
App/scripts/data/plots.json
App/scripts/app.js
App/scripts/main.controller.js
App/scripts/plot.factory.js
App/index.html
main.controller.js
angular
.module('myApp')
.controller('mainController',function ($scope, $http, plotFactory) {
$scope.plots = [];
//Method 1
plotFactory.getPlots().then(function successCallback (resp) {
console.log("If you reading this , momma we made it.")
$scope.plots = resp.data;
}).error(function (error) {
console.log(error)
});
});
plot.factory.js
angular
.module('myApp')
.factory('plotFactory', function($http) {
function getPlots() {
return $http.get('data/plots.json');
}
return {
getPlots: getPlots
}
});
index.html
<body ng-app="myApp" ng-controller="mainController">
<a class="accessibility" href="#main-content" accesskey="S">Skip to Content</a>
<div class="loading-screen">
<img src="_assets/images/pentair_logo.png" width="359" height="100" alt="Emerson" />
</div>
<div id="wrapper">
<header>
<div class="container-fluid">
<a href="#" class="logo"><img class="logoimg" src="_assets/images/pentair_logo.png" alt="Pentair" /><span>Interactive Sales Presentation</span></a>
<a href="#" class="menu-opener pull-right"><span></span></a>
</div>
</header>
<div class="menu-wrapper">
<div class="mobile-menu">
<ul class="collapsible">
<li ng-repeat="mobileMenu"><a href={{mobileMenu.url}}>{{mobileMenu.name}}</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="content-wrapper">
<img src="_assets/images/ui/Main_Background_edit.jpg" class="map-overlay" width="1024" height="768" alt="Oil and Gas" />
<div class="map-wrapper">
<div class="map-control level-01 panzoom">
<img src="_assets/images/ui/Main_Background_edit.jpg" class="map-bg" width="1024" height="768" alt="Oil and Gas" />
<div class="overlay"></div>
<!-- All Map Points -->
<div ng-repeat="plot in plots">
<a href={{plot.url}} class="plot level1 arrow-head flip {{plot.sid}}"><div><span class="title">{{plot.name}}</span><span class="number">+</span></div></a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
Footer
</div>
</footer>
</div>
<!-- Load Angular Dependencies -->
<!-- Async load of Javascript -->
<script type="text/javascript">
function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) };
loadJS('_assets/js/all.min.js');
</script>
<!-- In case javascript is disabled -->
<noscript>
<script type="text/javascript" src="_assets/css/all.min.js"></script>
</noscript>
<!-- Main App -->
<script type="text/javascript" src="Angular/angular.min.js"></script>
<script src="Angular/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/plot.factory.js"></script>
<script src="scripts/main.controller.js"></script>
</body>
我尝试了几种不同的路径，但都不起作用。但是，如果我将 json 数据作为变量留在工厂内，我的数据将被读取……但我正在尝试将数据与控制器分开以进行良好实践。我的猜测是该函数导致错误：不是函数，因为路径未返回任何有效内容，因此提示 .then 函数失败。是我工厂$http.get() 请求中的文件路径吗？还是我错过了其他东西？
更新了 get 函数和回调。
plotFactory.getPlots().then(function successCallback(response) {
//this callback will be called asynchronously
//when the response is available
$scope.plots = response.data;
console.log("Method 2 worked!")
},function errorCallback(response) {
console.log("We got a problem...")
});
仍然找不到data/plots.json 的 404。
这可能是参考错误吗？
【问题讨论】：
-
“不是一个函数，因为路径没有返回任何东西”，不，它给出了那个错误，因为不再有
error()角度承诺的函数。使用格式看documentation -
@PatrickEvans 谢谢。我更新了 get 函数和回调。 plotFactory.getPlots().then(function successCallback(response) { //这个回调将被异步调用 //当响应可用时 $scope.plots = response.data; console.log("方法 2 成功了！") } , function errorCallback(response) { console.log("We got a problem...") });仍然得到 404 not found for data/plots.json 。这可能是参考错误吗？
标签： javascript angularjs http get