0
私はオンライン広告の予約であるangular JSを使用してウェブサイトを作成しています。私はRestapiを使って新聞、カテゴリなどのバックエンドからデータを取得しています.Zomato.comのように彼の街によるとユーザーの所在地（都市）とデータ（新聞）を表示することです。だから最初に自分のIPからユーザーの場所を取得し、その場所をURLに設定するlocationControllerを作成した後、新聞のコントローラで都市に応じてデータを取得しようとしました。私はルートにui-routerを使用していますが、ui-viewではデータがレンダリングされず、都市を取得してデータを表示することについてまだ混乱しています。ここに私のコードがある -受け取ったデータが角型JSのui-viewに表示されていませんか？
locationController.js
adsApp.controller('locationCtrl',['$scope', '$http', '$uibModal', '$state', '$stateParams',
\t function($scope, $http, $uibModal, $state, $stateParams){
\t $scope.getLocation = function() {
\t if($stateParams.cityName){
\t $scope.cityName = $stateParams.cityName;
\t $state.go('app',{
\t 'cityName' : $scope.cityName
\t });
\t }else{
\t $http({
\t url: 'http://ipinfo.io/json',
\t headers: {'Content-Type': 'application/x-www-form-urlencoded'}
\t })
\t .then(function (response) {
\t var data = response.data;
\t $scope.cityName = data.city.toLowerCase();
\t if($scope.cityName){
\t $state.go('app',{
\t 'cityName' : $scope.cityName
\t });
\t }else{
\t $scope.getLocationPopup();
\t }
\t
\t });
\t }
\t
\t }
\t $scope.getLocationPopup = function() {
\t var modalInstance = $uibModal.open({
\t templateUrl: 'custom/popup.html',
\t });
\t }
\t
\t angular.element("#ads_body").scope().getLocation();
\t }]);newspaperController.js
adsApp.controller('newspaperCtrl',function($scope, $log,$state, $http, $window, $location, $stateParams){
\t console.log($stateParams);
\t $scope.formData = {};
\t if($stateParams){
\t $scope.formData = {
\t 'city_name' : $stateParams.cityName,
\t 'category_id' : $stateParams.categoryName
\t }
\t }
\t $scope.processForm = function() {
\t $http({
\t method: 'POST',
\t url: 'apocalypse/api/newspapers/newspaperData.json',
\t data: $.param($scope.formData), // pass in data as strings
\t headers: {'Content-Type': 'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload)
\t })
\t .then(function (response) {
\t var data = response.data;
\t var status = response.status;
\t var statusText = response.statusText;
\t var headers = response.headers;
\t var config = response.config;
\t console.log(data);
\t $scope.newspapers = data.newspapers;
\t $state.go('app_city_category',{
\t 'cityName' : $scope.formData.city_name,
\t 'categoryName' : $scope.formData.category_id,
\t })
\t });
\t };
\t });routes.js
adsApp.config([ '$stateProvider', '$routeProvider', '$urlRouterProvider', '$locationProvider' ,
\t function ($stateProvider, $routeProvider, $urlRouterProvider, $locationProvider) {
\t
\t
\t $stateProvider
\t .state('app', {
\t url: "/:cityName",
\t templateUrl : 'custom/newspaper_index_data.html',
\t controller: "newspaperCtrl"
\t })
\t .state('app_city_category', {
\t url: "/:cityName/:categoryName",
\t templateUrl : 'custom/newspaper_index_data.html',
\t controller: "newspaperCtrl"
\t });
\t
\t
\t }]);newspaper_index_data.html
<div class="container" ng-controller="newspaperCtrl">
\t <div class="white_box_wrapper">
\t <h2 class="primary_heading text-center">Choose a Newspaper below for {{currentCity}}</h2>
\t <p class="text-center m-b p-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
\t <br>
\t <div class="mobile_white_box_wrapper" ng-repeat="newspaper in newspapers">
\t <div class="col-md-3 p-n">
\t <h5>{{newspaper.newspaper.name}}</h5>
\t </div>
\t <div class="col-md-9 p-n ">
\t <div class="col-xs-6 p-n">
\t <div class="col-md-6 p-n p-b">
\t <h6>{{newspaper.city.name}}</h6>
\t </div>
\t <div class="col-md-6 p-n">
\t <h6>{{newspaper.category.name}}</h6>
\t </div>
\t </div>
\t <div class="col-xs-6 p-n text-right">
\t <div class="col-md-6 p-n p-b">
\t <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>
\t </div>
\t <div class="col-md-6 p-n">
\t <a href="#" class="btn btn-primary btn-md">
\t Select
\t </a>
\t </div>
\t </div>
\t </div>
\t <div class="clearfix"></div>
\t </div>
\t </div>
\t <!--Most Popular Newspaper in and around Lucknow -->
\t <div class="white_box_wrapper-no-shadow">
\t <h3 class="footer-heading-bold Lucknow-news">Most Popular Newspaper in and Around {{currentCity}}</h3>
\t <div class="mobile_white_box_wrapper">
\t <div class="container">
\t <ul class="popular_newspaper">
\t <li class="col-md-4" ng-repeat="newspaper in newspapers">
\t <a href="#">
\t {{newspaper.newspaper.name}}
\t </a>
\t </li>
\t </ul>
\t </div> \t
\t </div>
\t </div>
\t </div>index.htmlを
<!DOCTYPE html>
\t <html ng-app="adsYogiApp" id="adsyogi_id">
\t <head>
\t <title>Adsyogi.com</title>
\t <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
\t <base href="/adsyogi_php/">
\t <!-- lib css files -->
\t <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">
\t <link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
\t <!-- js files -->
\t <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
\t <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
\t <script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
\t <script type="text/javascript" src="js/lib/off-canvas/iptools-jquery-offcanvas.min.js"></script>
\t <!-- custom css -->
\t <link rel="stylesheet" type="text/css" href="css/fonts.css">
\t <link rel="stylesheet" type="text/css" href="css/style.css">
\t <link rel="stylesheet" type="text/css" href="js/lib/off-canvas/iptools-jquery-offcanvas.css">
\t </head>
\t <body style="overflow-x: hidden">
\t <header role="primary_header">
\t <div class="container">
\t <nav ng-include="'custom/navigation.html'"></nav>
\t <!-- Search Box start-->
\t <div class="row search-box ">
\t <div class="col-md-12">
\t <h1>Find the Best Newspapers to<br> Advertise in {{currentCity}}</h1>
\t <p class="sub-small-text">consectetur adipiscing elit. Nulla cursus tincidunt augue, in iaculis mi ac</p>
\t <div class="col-md-1"></div>
\t <div id="header_search_wrapper" class="col-md-10" ng-controller="newspaperCtrl">
\t <form method="post" ng-submit="processForm()">
\t <div id="city_search_wrapper" class="col-md-4 p-n icon" ng-controller="citiesCtrl">
\t <select class="form-control b-r-white header_dropdown" name="city_name" ng-model="formData.city_name">
\t <option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{cityN.slug}}">{{cityN.name}}</option>
\t </select><!--
\t <input class="form-control b-r-white header_dropdown" name="cityName" ng-model="formData.cityName" type="text" list="listid">
\t <datalist id='listid'>
\t <option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{ cityN.name }}">
\t </datalist> -->
\t <i class="fa fa-location-arrow"></i>
\t </div>
\t <div id="category_search_wrapper" class="col-md-4 p-n icon" ng-controller="categoriesCtrl">
\t <select class="form-control b-r-white header_dropdown" name="category_id" ng-model="formData.category_id">
\t <option>-- Select Category --</option>
\t <option class="header_dropdown_option" ng-repeat="categoryN in parentCategories" value="{{categoryN.id}}">{{categoryN.name}}</option>
\t </select>
\t <i class="fa fa-search"></i>
\t </div>
\t <div class="col-md-4 p-n">
\t <button type="submit" class="btn btn-primary btn-md">SHOW NEWSPAPERS </button>
\t </div>
\t <div class="clearfix"></div>
\t </form>
\t </div>
\t <div class="col-md-1"></div>
\t <div class="clearfix"></div>
\t </div>
\t </div>
\t <!-- Search Box end -->
\t </div>
\t </header>
\t <!-- header end -->
\t <section id="main-wrapper" role="main-wrapper">
\t <div ui-view>
\t </div>
\t </section>
\t <div ng-include="'custom/footer.html'"></div>
\t <script type="text/javascript" src="js/lib/angular/angular-resource.min.js"></script>
\t <script type="text/javascript" src="js/lib/angular/angular-ui-router.min.js"></script>
\t <script type="text/javascript" src="js/lib/angular/angular-messages.min.js"></script>
\t <script type="text/javascript" src="js/lib/angular/angular-route.min.js"></script>
\t <!-- Include UI Bootstrap library -->
\t <script src="js/lib/angular/ui-bootstrap-tpls-2.5.0.min.js"></script>
\t <script type="text/javascript" src="js/app/app.js"></script>
\t <script type="text/javascript" src="js/app/routes.js"></script>
\t <script type="text/javascript" src="js/app/controllers/locationController.js"></script>
\t <script type="text/javascript" src="js/app/controllers/citiesController.js"></script>
\t <script type="text/javascript" src="js/app/controllers/categoriesController.js"></script>
\t <script type="text/javascript" src="js/app/controllers/newspaperController.js"></script>
\t </body>
\t </html>app.js
angular.module('core', ['ui.router', 'ngResource', 'ngMessages', 'ngRoute', 'ui.bootstrap']);
\t angular.module('controllers', []);
\t angular.module('factories', []);
\t angular.module('services', []);
\t angular.module('configs', []);
\t angular.module('runs', []);
\t var adsYogiApp = angular.module('adsYogiApp', ['core', 'runs', 'configs', 'services', 'factories', 'controllers']);
を使用する必要がやりたいことには、それについていくつかの未知数が残っているので、私ちょっと質問から始めます。あなたの 'app.js'ファイルには多くのモジュールが定義されています。これらのモジュールはすべて使用していますか？あなたのメインモジュールは 'adsYogiApp'です。コントローラとコンフィグが定義されているのは、adsAppです。あなたが投稿したコードでは、どこにでもあなたの 'locationCtrl'を使っているとは思われません。何か誤りがありますか？もしそうなら、あなたも同様にそれを唱えることができますか？私はそれについて、今のところ考える:) – eminlala
@eminlala問題は解決されました。また、app.jsで定義されているモジュールについては、間違いを入力していたアプリ名とそのすべてを使用しています。申し訳ありません。 – Blackflash