Aufruf von Httpget() in Multiviews/geschachtelte Zustände von UIRouter in AngularJS

Question

Ich bin neu in AngularJS und habe jetzt ein Problem mit mehreren Ansichten. Nach verschiedenen Beispielen gesucht, konnte aber keine Lösung finden. Hoffe, du wirst helfen. Ich habe eine Submit-Funktion innerhalb des Controllers in der verschachtelten Ansicht. Wenn ein Benutzer auf submit klickt, muss der Befehl subT_click() aufgerufen werden, und eine URL muss basierend auf dem angegebenen Datum erstellt werden und Daten von dieser URL aufrufen und in einer Tabelle anzeigen.

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

Unten ist, wie ich Zustände erklärt und die subt_click() aufgerufen habe.

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

Tabula submit.html:

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

Hier ist ein zupfen, den Code zu überprüfen: plunker: http://plnkr.co/edit/3Iyao5aOt2tY7Ze104dp?p=preview.

Die angezeigte Tabelle ist leer und nicht die Daten von URL (URL verwendet wird von lokalen Host). Es gibt keine Fehler auf der Konsole und von console.log (Antwort) Ich konnte die Array-Objekte von URL sehen.

Bin nicht sicher, wo das schief gelaufen ist. Wird wirklich dankbar sein, wenn jemand helfen kann !!

Answer 1

Überprüfen Sie diese plunker. Ich habe einen Controller, einen Dummy-Service zum Abrufen von Daten hinzugefügt und den Service in resolve verwendet, um Daten in den Controller zu injizieren.