3 개의 이온 탭이있는 하단의 클래식 3 버튼 메뉴를 사용하는 angular + ionic으로 앱을 구축하고 있습니다. 사용자가 탭을 클릭하면 해당 템플릿이 ui-router를 통해 열립니다.
다음과 같은 상태가 있습니다.
$stateProvider
.state('other', {
url: "/other",
abstract: true,
templateUrl: "templates/other/other.html"
})
템플릿에서 다음과 같이합니다.
<ion-nav-view name="other" ng-init="doSomething()"></ion-nav-view>
컨트롤러에서 doSomething () 함수를 작성하고 수동으로 호출 할 수 있다는 것을 알고 있습니다. 그래도 같은 문제가 발생합니다. 누군가 해당 뷰를 열 때마다 doSomething () 함수를 두 번 이상 호출하는 방법을 알아낼 수없는 것 같습니다.
지금은 doSomething () 함수가 잘 호출되지만 사용자가 해당 뷰 / 탭을 처음 열 때만 호출됩니다. 사용자가 해당보기 또는 탭을 열 때마다 함수 (지리 위치 업데이트)를 호출하고 싶습니다.
그것을 구현하는 올바른 방법은 무엇입니까?
도와 주셔서 감사합니다!
답변
뷰에 특정 컨트롤러를 할당 한 경우 뷰가로드 될 때마다 컨트롤러가 호출됩니다. 이 경우 컨트롤러가 호출되는 즉시 컨트롤러에서 일부 코드를 실행할 수 있습니다. 예를 들면 다음과 같습니다.
<ion-nav-view ng-controller="indexController" name="other" ng-init="doSomething()"></ion-nav-view>
그리고 컨트롤러에서 :
app.controller('indexController', function($scope) {
/*
Write some code directly over here without any function,
and it will be executed every time your view loads.
Something like this:
*/
$scope.xyz = 1;
});
편집 : 상태 변경을 추적 한 다음 경로가 변경되고 특정 경로를 방문 할 때 일부 코드를 실행할 수 있습니다. 예를 들면 다음과 같습니다.
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){ ... })
자세한 내용은 상태 변경 이벤트 에서 확인할 수 있습니다 .
답변
기본적으로 컨트롤러는 캐시 였으므로 컨트롤러가 한 번만 실행되었습니다. 특정 컨트롤러에 대한 캐싱을 끄려면 사용자를 수정 .config(..).state하고 cache옵션을로 설정해야 합니다 false. 예 :
.state('myApp', {
cache: false,
url: "/form",
views: {
'menuContent': {
templateUrl: "templates/form.html",
controller: 'formCtrl'
}
}
})
자세한 내용은 http://ionicframework.com/docs/api/directive/ionNavView/ 를 방문하십시오.
답변
AlexMart 의 답변과 링크에 이어 다음 과 같이 작동합니다.
.controller('MyCtrl', function($scope) {
$scope.$on('$ionicView.enter', function() {
// Code you want executed every time view is opened
console.log('Opened!')
})
})
답변
나는 같은 문제에 직면했고, 여기서 나는 같은 문제를 가진 다른 모든 사람들 에게이 행동의 이유를 남깁니다.
LifeCycle보기
성능을 개선하기 위해 뷰 요소 및 범위 데이터를 캐시하는 Ionic의 기능을 개선했습니다. 컨트롤러가 초기화되면 앱 수명 내내 지속될 수 있습니다. 시계주기에서 숨겨지고 제거됩니다. 스코프를 재 구축하는 것이 아니기 때문에 다시 감시주기에 들어갈 때 수신해야하는 이벤트를 추가했습니다.
전체 설명 및 $ ionicView 이벤트를 보려면 http://ionicframework.com/blog/navigating-the-changes/ 로 이동하십시오.
답변
cache-view = “false”로 뷰 캐시를 비활성화하지 않는 이유 입니까?
보기에서 다음과 같이 ion-nav-view에 추가하십시오.
<ion-nav-view name="other" cache-view="false"></ion-nav-view>
또는 stateProvider에서 :
$stateProvider.state('other', {
cache: false,
url : '/other',
templateUrl : 'templates/other/other.html'
})
어느 쪽이든 컨트롤러가 항상 호출되도록합니다.
답변
예를 들어 @Michael Trouw에게
컨트롤러 안에이 코드를 넣으십시오. 이 상태가 시작되거나 활성화 될 때마다 실행되므로 캐시 비활성화에 대해 걱정할 필요가 없으며 더 나은 방법입니다.
.controller('exampleCtrl',function($scope){
$scope.$on('$ionicView.enter', function(){
// Any thing you can think of
alert("This function just ran away");
});
})
보기가 표시되기 전에 실행되는 $ ionicView.beforeEnter->와 같은 유연성의 더 많은 예를 가질 수 있습니다. 그리고 그것에 더 많은 것이 있습니다.
답변
위에서 언급 한 뷰 요소 및 범위 데이터를 캐시하는 Ionic의 기능을 고려할 때 뷰가로드 될 때마다 컨트롤러를 실행하려는 경우 이는 또 다른 방법 일 수 있습니다. 다음을 수행하여 ionic에서 사용하는 캐싱 메커니즘을 전역 적으로 비활성화 할 수 있습니다.
$ionicConfigProvider.views.maxCache(0);
그렇지 않으면, 제가 일했던 방식은
$scope.$on("$ionicView.afterLeave", function () {
$ionicHistory.clearCache();
});
다시 들어갈 때마다 컨트롤러를 다시 실행하기 위해 뷰를 떠나기 전에 캐시를 지우는 것입니다.