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

0

Я пытаюсь вызвать конечную точку 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>
Теги:
onsen-ui
onsen-ui2

2 ответа

1

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

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

чтобы узнать больше о rootScope, проверьте эту ссылку.

Удачи.

Обновление 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/

0

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

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

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

  1. Используйте службу $rootScope как предложил Йогеш (в этом случае принимайте его ответ).
  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"> страницу активности <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 (я думаю, начиная с бета-версии 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 дней назад, поскольку это дубликат этого (я, должно быть, пропустил его в то время).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню