在 AngularJS 的 UI 路由器的 Multiviews/Nested 状态下调用 Http Get()

Question

我是 AngularJS 的新手，现在面临 uirouter 多视图的问题。搜索了各种示例，但找不到解决方案。希望你能帮忙。我在嵌套视图中的控制器内部有一个提交功能。当用户点击提交时，必须调用 subt_click() 并且必须根据提供的日期创建 url 并且应该从 url 调用数据并显示在table.

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

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

这里是检查代码的插件：plunker:http://plnkr.co/edit/3Iyao5aOt2tY7Ze104dp?p=preview.

显示的 table 是空的，而不是来自 url 的数据（URL 我使用的是来自本地主机）。控制台和 [=33= 没有错误]（响应）我可以从 url.

中看到数组对象

我不确定哪里出了问题。如果有人能提供帮助，将不胜感激！！

Answer 1

检查此 plunker。我添加了一个控制器，一个用于获取数据的虚拟服务，并使用 resolve 中的服务将数据注入控制器。

在 AngularJS 的 UI 路由器的 Multiviews/Nested 状态下调用 Http Get()

Calling Httpget() in Multiviews/Nested states of UIRouter in AngularJS

javascript

url

http-get

angularjs

angular-ui-router