2016-04-29 16 views
0

私は単純な角度のアプリケーションをテストしていますが、私はいくつかの問題に直面しています。 http GET呼び出しは実行されますが、リゾルバは空にレンダリングされます。ここでは、コードは次のようになります。角度ui-routerはhttp空の値を解決します

簡単なのindex.html:

<html ng-app="myApp"> 
<head> 
    //all scripts loaded 
</head> 
<body ng-controller="myCtrl"> 
    <p>{{test}}</p> 
    <a ui-sref="tab1">Show Tab 1</a> 
    <a ui-sref="tab2">Show Tab 2</a> 
    <a ui-sref="tab3">Show Tab 3</a> 

    <ui-view></ui-view> 
</body> 
</html> 

app.js:

var app = angular.module('myApp', ['ui.router']); 

app 
.service('DataService', function ($http) { 
    return { 
     getData: function() { 
      return $http({ 
       method : "GET", 
       url : "/hi" 
      }).then(function(response) { 
       return response.data; 
      },function(response) { 
       return "error"; 
      }); 
     } 
    } 
}); 

app 
.controller('myCtrl', function($scope) { 
    $scope.test = "Test"; 
}); 

app 
.config(function($stateProvider, $urlRouterProvider){ 
    $stateProvider 
    .state('tab1', { 
     url: '/tab1', 
     templateUrl: '/assets/templates/tab1.html' 
    }) 
    .state('tab2', { 
     url: '/tab2', 
     templateUrl: '/assets/templates/tab2.html' 
    }) 
    .state('tab3', { 
     url: '/tab3', 
     templateUrl: '/assets/templates/tab3.html' 
     resolve:{ 
      mydata : function (DataService) { 
       return DataService.getData(); 
      } 
     }, 
     controller: 'myCtrl' 
    }); 

    $urlRouterProvider.otherwise('/tab1'); 
}); 

TAB3テンプレート:

<p>Data: {{mydata}}</p> 

私は、言ったように、I "tab3"リンクをクリックすると、http get呼び出しが完了し、JSONデータが取得されますが、 "mydata"は空白にレンダリングされます。

ありがとうございます。

+0

は 'クロムインスペクタ開こうとする - >ネットワークpanel'を、何を、あなたのWebサービスの戻りを参照してください...答えのための – Hitmands

答えて

1

コントローラはmydataで何もしません。スコープにはないので、ビューでは表示できません。それは次のようになります。

app.controller('myCtrl', function($scope, mydata) { 
    $scope.mydata = mydata; 
}); 
+0

おかげで、とにかく私は前にいることを試みたが、コントローラには「マイデータを見つけることができません"ちょうどエラーがスローされます。コントローラーに "mydata"を注入するにはどうすればいいですか? – Aroos

+0

これは、メインのindex.htmlページにmyCtrlを使用しているためですが、mydataを必要とするtab3ルートのコントローラを使用することになっています。 index.htmlから 'ng-controller =" myCtrl "を削除してください。 –

+0

あなたは正しいです!!!!どうもありがとうございました!!! – Aroos

関連する問題