Я пытаюсь вызвать конечную точку 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>
Да, это потому, что обе страницы имеют разные контроллеры, что приводит к разным областям. Невозможно получить доступ к переменным из одной области действия в другую.
Следовательно, одним из решений в этом случае может быть использование службы rootScope. Root Scope - это родительская область для всех областей применения вашего углового приложения. Следовательно, вы можете получить доступ к переменной корневых областей из любой другой области, при условии, что вы введете в нее команду $ rootScope.
чтобы узнать больше о rootScope, проверьте эту ссылку.
Удачи.
Обновление 1:
проверить эти статьи
https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
Как сказал Йогеш, причина, по которой вы не получаете свои ценности, состоит в том, что если вы посмотрите на $scope.testscore
и попытаетесь найти, где определена $scope
вы увидите, что это аргумент для функции контроллера (таким образом, это только для этого контроллера).
Однако мы видим, что контроллер подключен к странице и вы нажимаете другую страницу.
Поэтому в этом случае у вас есть несколько вариантов:
$rootScope
как предложил Йогеш (в этом случае принимайте его ответ). Создайте свой собственный сервис/фабрику/etc, сделав что-то похожее на $rootScope
.
(function(){
var historyData = {};
myApp.factory('historyData', function() {
return historyData;
});
})();
Технически вы, вероятно, могли бы сделать его более значимым, но, возможно, эти вещи лучше описываются в некоторых угловых гидах.
Если у вас есть несколько компонентов, разделяющих одни и те же данные, возможно, вы можете просто определить свой контроллер на более высоком уровне - например, ons-navigator
- таким образом он будет включать все страницы. Это было бы нормально только в том случае, если ваше приложение действительно мало, но это не рекомендуется для больших приложений.
Если эти данные требуются только в файле 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
.
Если вы все еще настаиваете на передаче всех данных вместо идентификатора - вот простой пример. В новых версиях бета-версии 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 дней назад, поскольку это дубликат этого (я, должно быть, пропустил его в то время).