2016-05-21 8 views
1

AngularJSの新機能で、複数のビューを持つuirouterの問題に直面しています。さまざまな例を検索しましたが、解決策が見つかりませんでした。あなたがお役に立てば幸いです。 私は、コントローラ内にネストされたビューのsubmit関数を持っています。ユーザーがサブミットをクリックすると、subt_click()が呼び出され、指定された日付に基づいてURLを作成し、そのURLからデータを呼び出して表に表示する必要があります。AngularJSのUIRouterのマルチビュー/ネストされた状態でのHttpget()の呼び出し

<div ng-controller="MyController as ctrl"> 
<form class="form-horizontal"> 
    <div class="form-group"> 
       <div class="col-sm-5"> 
       <p class="input-group"> 
       <input type="text" class="form-control" datetime-picker="yyyy-MM-dd HH:mm" ng-model="dates.date3" is-open="ctrl.open.date3" /> 
       <span class="input-group-btn"> 
       <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'date3')"><i class="fa fa-calendar"></i></button> 
       </span> 
      </p> 
     </div> 
    </div>   
</form> 
<a ui-sref=".submit" class="btn btn-info" ng-click="subt_click()">Submit</a> 
</div> 

以下は、私が州を宣言し、subt_click()を呼び出した方法です。

app.js:

var wc = angular.module('wc', ['ui.router','ui.bootstrap', 'ui.bootstrap.datetimepicker']); 
wc.config(function ($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise('/posts'); 
$stateProvider 
    .state('tab', {    
     url: '/tab1', 
     templateUrl: 'tab.html' 
    })   
    .state('tab.submit', {    
      url: '/submit', 
      templateUrl: 'tab-submit.html', 
      //controller: 'MyController' 
     }) 

    .state('tabs', { 
     url: '/tabs', 
     templateUrl: 'tabs.html',   
    }); 
}); 
wc.controller('MyController', function ($scope, $http, $location, $filter) { 
var that = this; 
var in10Days = new Date(); 
in10Days.setDate(in10Days.getDate() + 10); 
$scope.dates = { 
    date3: " ", 
    date4: " " 
}; 
this.dates = { 
    date3: new Date(), 
    date4: new Date(), 
}; 
this.open = { 
    date3: false, 
    date4: false, 
}; 
// Disable weekend selection 
this.disabled = function (date, mode) { 
    return (mode === 'day' && (new Date().toDateString() == date.toDateString())); 
}; 
this.dateOptions = { 
    showWeeks: false, 
    startingDay: 1 
}; 
this.timeOptions = { 
    readonlyInput: false, 
    showMeridian: false 
}; 
this.dateModeOptions = { 
    minMode: 'year', 
    maxMode: 'year' 
}; 
this.openCalendar = function (e, date) { 
    that.open[date] = true; 
}; 

$scope.format = 'yyyy-MM-dd%20HH:mm'; 
debugger; 
$scope.subt_click = function() { 
    var date = $filter("date")($scope.dates.date3, $scope.format);  
      $http.get("URLpartA"+date+"URLpartB") 
     .success(function(response) { 
      debugger 
      $scope.condition = response.Table 
      console.log(response) 
     });  
}; 
}); 

タブsubmit.html:plunkerhttp://plnkr.co/edit/3Iyao5aOt2tY7Ze104dp?p=previewここ

 <table> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in condition"> 
       <td>{{x.ID}}</td> 
       <td>{{x.Name}}</td>      
      </tr> 
     </tbody> 
    </table> 

がコードをチェックするplunkです。

表示されている表は空であり、url(URLはローカルホストのものです)からのデータではありません。コンソールおよびconsole.log(応答)にエラーはありません。

これはどこが間違っているか分かりません。もし誰かが助けることができれば本当に感謝します!

+0

私はあなたのプラークを試み、2つのコンソールエラーがありました。 'Datepickerディレクティブ:" ng-model "の値はDateオブジェクトでなければならず、get要求は400の不正な要求を返しました。あなたのローカルコードが動作していると仮定すると、成功コールバックの 'response'の値は何ですか? – Haymaker87

+0

@ Haymaker87:{"ID":6、 "名前": "ジャック"}、{"ID:7"、 "名前": "ジル"}]} – Deborah

+0

コントローラがそのビューに正しくマップされていないと想定する必要があります。あなたのルートブロックの '// controller:" MyController "'のコメントを外すとどうなりますか? – Haymaker87

答えて

0

これをチェックするplunkerコントローラを追加し、データを取得するためのダミーサービスを使用し、resolveのサービスを使用してコントローラにデータを注入しました。

+0

が動作していない決意http://plnkr.co/edit/nPGGndGCwX3CIuwdB6gI?p=previewを、追加した方法です。それが私が新しいことをした理由です。 – Venkat

+0

しかし、それは私がworkonする必要があるコードです。ソートできませんでした – Deborah

関連する問題