2016-04-29 4 views
0

Я тестирую простое угловое приложение, и у меня есть некоторые проблемы. Вызов http GET завершен, но resolver отображает пустой. Вот код:Угловой ui-маршрутизатор разрешает 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> 

Как я уже сказал, когда я щелкните ссылку «tab3», выполняется вызов http get, и данные JSON извлекаются, но «mydata» отображается пустым.

Любой ключ? Спасибо и приветствую.

+0

попытка открыть 'хром инспектор -> Сеть panel' и увидеть, что ваши услуги возвращает веб ... – Hitmands

ответ

1

Ваш контроллер ничего не делает с mydata. Таким образом, это не входит в сферу действия, поэтому представление не может отображать его. Оно должно быть:

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

Спасибо за ответ, в любом случае я пытался, что и раньше, но контроллер не может найти«MyData ». Просто выдает ошибку. Как я могу ввести «mydata» в контроллер? – Aroos

+0

Это потому, что вы используете myCtrl для вашей главной страницы index.html, хотя предполагается, что он должен быть контроллером маршрута tab3, требующим mydata. Удалите 'ng-controller =" myCtrl "' из index.html. –

+0

Вы правы !!!! Большое спасибо!!! – Aroos