我正在使用angular JS创建一个网站，这是一个在线广告预订。我正在使用RestAPI从报纸，类别等后端获取数据。我要做的就是根据他的城市获得用户的位置（城市）和显示数据（报纸），就像Zomato.com一样。所以首先我创建了一个locationController来从他的IP获取用户的位置，并将位置设置为URL，然后我尝试根据报纸控制器上的城市获取数据。我正在使用ui-router进行路由，但是在ui-view中，数据没有渲染，我仍然对获取城市和显示数据感到困惑。这是我的代码 -
locationController.js
adsApp.controller('locationCtrl',['$scope', '$http', '$uibModal', '$state', '$stateParams',
function($scope, $http, $uibModal, $state, $stateParams){
$scope.getLocation = function () {
if($stateParams.cityName){
$scope.cityName = $stateParams.cityName;
$state.go('app',{
'cityName' : $scope.cityName
});
}else{
$http({
url: 'http://ipinfo.io/json',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function (response) {
var data = response.data;
$scope.cityName = data.city.toLowerCase();
if($scope.cityName){
$state.go('app',{
'cityName' : $scope.cityName
});
}else{
$scope.getLocationPopup();
}
});
}
}
$scope.getLocationPopup = function () {
var modalInstance = $uibModal.open({
templateUrl: 'custom/popup.html',
});
}
angular.element("#ads_body").scope().getLocation();
}]);
newspaperController.js
adsApp.controller('newspaperCtrl',function($scope, $log,$state, $http, $window, $location, $stateParams){
console.log($stateParams);
$scope.formData = {};
if($stateParams){
$scope.formData = {
'city_name' : $stateParams.cityName,
'category_id' : $stateParams.categoryName
}
}
$scope.processForm = function () {
$http({
method: 'POST',
url: 'apocalypse/api/newspapers/newspaperData.json',
data: $.param($scope.formData), // pass in data as strings
headers: {'Content-Type': 'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload)
})
.then(function (response) {
var data = response.data;
var status = response.status;
var statusText = response.statusText;
var headers = response.headers;
var config = response.config;
console.log(data);
$scope.newspapers = data.newspapers;
$state.go('app_city_category',{
'cityName' : $scope.formData.city_name,
'categoryName' : $scope.formData.category_id,
})
});
};
});
routes.js
adsApp.config([ '$stateProvider', '$routeProvider', '$urlRouterProvider', '$locationProvider' ,
function ($stateProvider, $routeProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
url: "/:cityName",
templateUrl : 'custom/newspaper_index_data.html',
controller: "newspaperCtrl"
})
.state('app_city_category', {
url: "/:cityName/:categoryName",
templateUrl : 'custom/newspaper_index_data.html',
controller: "newspaperCtrl"
});
}]);
newspaper_index_data.html
<div class="container" ng-controller="newspaperCtrl">
<div class="white_box_wrapper">
<h2 class="primary_heading text-center">Choose a Newspaper below for {{currentCity}}</h2>
<p class="text-center m-b p-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
<br>
<div class="mobile_white_box_wrapper" ng-repeat="newspaper in newspapers">
<div class="col-md-3 p-n">
<h5>{{newspaper.newspaper.name}}</h5>
</div>
<div class="col-md-9 p-n ">
<div class="col-xs-6 p-n">
<div class="col-md-6 p-n p-b">
<h6>{{newspaper.city.name}}</h6>
</div>
<div class="col-md-6 p-n">
<h6>{{newspaper.category.name}}</h6>
</div>
</div>
<div class="col-xs-6 p-n text-right">
<div class="col-md-6 p-n p-b">
<h6><i class="fa fa-inr" aria-hidden="true"></i>{{newspaper.basic_price}} <span class="text-muted ">Per {{newspaper.number}} {{newspaper.newspaper.price_type}} </span></h6>
</div>
<div class="col-md-6 p-n">
<a href="#" class="btn btn-primary btn-md">
Select
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--Most Popular Newspaper in and around Lucknow -->
<div class="white_box_wrapper-no-shadow">
<h3 class="footer-heading-bold Lucknow-news">Most Popular Newspaper in and Around {{currentCity}}</h3>
<div class="mobile_white_box_wrapper">
<div class="container">
<ul class="popular_newspaper">
<li class="col-md-4" ng-repeat="newspaper in newspapers">
<a href="#">
{{newspaper.newspaper.name}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
的index.html
<!DOCTYPE html>
<html ng-app="adsYogiApp" id="adsyogi_id">
<head>
<title>Adsyogi.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<base href="/adsyogi_php/">
<!-- lib css files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
<!-- js files -->
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="js/lib/off-canvas/iptools-jquery-offcanvas.min.js"></script>
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/lib/off-canvas/iptools-jquery-offcanvas.css">
</head>
<body style="overflow-x: hidden">
<header role="primary_header">
<div class="container">
<nav ng-include="'custom/navigation.html'"></nav>
<!-- Search Box start-->
<div class="row search-box ">
<div class="col-md-12">
<h1>Find the Best Newspapers to<br> Advertise in {{currentCity}}</h1>
<p class="sub-small-text">consectetur adipiscing elit. Nulla cursus tincidunt augue, in iaculis mi ac</p>
<div class="col-md-1"></div>
<div id="header_search_wrapper" class="col-md-10" ng-controller="newspaperCtrl">
<form method="post" ng-submit="processForm()">
<div id="city_search_wrapper" class="col-md-4 p-n icon" ng-controller="citiesCtrl">
<select class="form-control b-r-white header_dropdown" name="city_name" ng-model="formData.city_name">
<option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{cityN.slug}}">{{cityN.name}}</option>
</select><!--
<input class="form-control b-r-white header_dropdown" name="cityName" ng-model="formData.cityName" type="text" list="listid">
<datalist id='listid'>
<option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{ cityN.name }}">
</datalist> -->
<i class="fa fa-location-arrow"></i>
</div>
<div id="category_search_wrapper" class="col-md-4 p-n icon" ng-controller="categoriesCtrl">
<select class="form-control b-r-white header_dropdown" name="category_id" ng-model="formData.category_id">
<option>-- Select Category --</option>
<option class="header_dropdown_option" ng-repeat="categoryN in parentCategories" value="{{categoryN.id}}">{{categoryN.name}}</option>
</select>
<i class="fa fa-search"></i>
</div>
<div class="col-md-4 p-n">
<button type="submit" class="btn btn-primary btn-md">SHOW NEWSPAPERS </button>
</div>
<div class="clearfix"></div>
</form>
</div>
<div class="col-md-1"></div>
<div class="clearfix"></div>
</div>
</div>
<!-- Search Box end -->
</div>
</header>
<!-- header end -->
<section id="main-wrapper" role="main-wrapper">
<div ui-view>
</div>
</section>
<div ng-include="'custom/footer.html'"></div>
<script type="text/javascript" src="js/lib/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-messages.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-route.min.js"></script>
<!-- Include UI Bootstrap library -->
<script src="js/lib/angular/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script type="text/javascript" src="js/app/app.js"></script>
<script type="text/javascript" src="js/app/routes.js"></script>
<script type="text/javascript" src="js/app/controllers/locationController.js"></script>
<script type="text/javascript" src="js/app/controllers/citiesController.js"></script>
<script type="text/javascript" src="js/app/controllers/categoriesController.js"></script>
<script type="text/javascript" src="js/app/controllers/newspaperController.js"></script>
</body>
</html>
app.js
angular.module('core', ['ui.router', 'ngResource', 'ngMessages', 'ngRoute', 'ui.bootstrap']);
angular.module('controllers', []);
angular.module('factories', []);
angular.module('services', []);
angular.module('configs', []);
angular.module('runs', []);
var adsYogiApp = angular.module('adsYogiApp', ['core', 'runs', 'configs', 'services', 'factories', 'controllers']);
答案 0 :(得分：0)
如果问题是 newspaper_index_data.html ， {{newspaper.newspaper.name}} 等值与任何数据都不对应。这是因为你在调用函数 processForm 时设置了这些值，但是这个函数改变了视图，所以范围也和$ scope.newspaper这样的值在新范围内不再存在。
在AngularJS中，如果对多个视图使用相同的控制器，则每次加载视图时，控制器都会初始化并刷新并注入新的$ scope。
要执行您想要的操作，您需要使用$rootScope（所有控制器共享的范围）或使用provider