Передача данных на новую страницу с помощью Onsenui

Question

Я пытаюсь вызвать конечную точку API, когда пользователь нажимает кнопку, содержащую запрос myNavigator.pushPage(). Однако я не могу получить данные $ scope, сгенерированные из запроса $ http.get, для передачи на новую страницу.

Если я тестирую с использованием console.log ('test'); внутри .success $ http.get запрос Я успешно получаю информацию журнала в консоли, но любые данные хранятся в $ scope.var = 'something'; не попадает на страницу! На самом деле смутно!

$scope.historyDetails = function(id){ 

    var options = { 
     animation: 'slide', 
     onTransitionEnd: function() { 
     $http.get('http://xxx-env.us-east-1.elasticbeanstalk.com/apiget/testresult/testId/'+id).success(function(data) {  

      $scope.testscore = 'something'; // this is not getting passed to page!    

      console.log('bahh'); // But I see this in console 



     });    
     } 
    }; 
    myNavigator.pushPage("activity.html", options);   
} 

Страница:

<ons-page ng-controller="HistoryController"> 
... 

<span style="font-size:1.2em">{{testscore}} </span><span style="font-size:0.5em;color:#555"></span> 

... 
</ons-page> 

Answer 1

Да, это так, потому что обе страницы имеет различные контроллеры, в результате чего в различных областях. Невозможно получить доступ к переменным из одной области действия в другую.

Следовательно, одним из решений в этом случае может быть использование службы rootScope. Root Scope - это родительская область для всех областей применения в вашем угловом приложении. Следовательно, вы можете получить доступ к переменной корневых областей из любой другой области, при условии, что вы вводите службу $ rootScope в этот контроллер.

чтобы узнать больше о rootScope check this ссылка.

Удачи.

Update 1:

проверить эти статьи

http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS-$rootScope-and-$scope.html

https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Answer 2

Как Yogesh сказал, что причина, вы не получаете свои ценности, потому что если вы посмотрите на $scope.testscore и попытаться найдите где определено $scope, вы увидите, что это аргумент для функции контроллера (таким образом, это только для этого контроллера).

Однако мы видим, что контроллер прикреплен к странице, и вы нажимаете другую страницу.

Так что в этом случае у вас есть несколько вариантов:

1. Используйте $rootScope службу как предложено Yogesh (в этом случае принять свой ответ).

2. Создайте свой собственный сервис/завод/etc, сделав что-то похожее на $rootScope.

   (function(){ 
       var historyData = {}; 
       myApp.factory('historyData', function() { 
        return historyData; 
       }); 
   })(); 
   

   Технически вы могли бы сделать его более значимым, но, возможно, эти вещи лучше описаны в некоторых угловых направляющих.

3. Если у вас есть несколько компонентов, разделяющих одни и те же данные, возможно, вы можете просто определить свой контроллер на более высоком уровне - например, ons-navigator - таким образом он будет включать в себя все страницы. Это было бы нормально только в том случае, если ваше приложение действительно мало, но это не рекомендуется для больших приложений.

4. Если эти данные требуются только в activity.html, вы можете просто загрузить их в контроллер этой страницы. Например:

   myApp.controller('activityController', function($scope, $http) { 
       $http.get(...).success(function(data) { 
        $scope.data = data; 
       }); 
   } 
   

   Но, я думаю, вам все равно нужно будет получить идентификатор. В любом случае, вероятно, лучше, если вы сделаете запрос здесь, теперь вам нужен только идентификатор, а не данные. Вы можете на самом деле обмануть его с помощью директивы var. Если вы укажете страницу активности <ons-page var="myActivityPage">, вы сможете получить к ней доступ через переменную myActivityPage.

   И что вы искали - когда вы делаете

   myNavigator.pushPage("activity.html", options);   
   

   фактически параметры сохраняются внутри ons-page из activity.html.

   Так что вы можете сделать

   myNavigator.pushPage("activity.html", {data: {id: 33}, animation: 'slide'}); 
   

   И в другом контроллере ваш идентификатор будет myActivityPage.options.data.id.

5. Если вы все еще настаиваете на передаче всех данных вместо идентификатора - вот простой пример. В новых версиях 2.0 beta (я думаю, что с бета-версии 6 или 7) все методы pushPage, popPage и т. Д. Возвращают обещание, которое разрешает ons-page, что упрощает процесс.

   $scope.historyDetails = function(id){ 
       myNavigator.pushPage("activity.html", {animation: 'slide'}).then(function(page) { 
       $http.get('...' + id).success(function(data) { 
        page.options.data = data; 
       }); 
       }); 
   }); 
   

Примечание стороны: Вы можете закрыть этот вопрос, который вы отправили 5 дней назад, так как это дубликат этого одного (Должно быть, я пропустил это в то время).