code

뷰가 열리거나 표시될 때마다 컨트롤러 기능 실행

starcafe 2023. 2. 8. 19:40
반응형

뷰가 열리거나 표시될 때마다 컨트롤러 기능 실행

아래쪽에 3개의 이온탭이 있는 클래식한 3버튼 메뉴를 사용하는 Angular+ionic 앱을 만들고 있습니다.사용자가 탭을 클릭하면 해당 템플릿이 UI 라우터를 통해 열립니다.

다음과 같은 상태가 있습니다.

$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() 함수는 정상적으로 호출되지만 사용자가 보기/탭을 처음 열었을 때만 호출됩니다.사용자가 해당 보기 또는 탭을 열 때마다 (지올로케이션을 업데이트하기 위한) 함수를 호출하고 싶습니다.

그것을 구현하는 올바른 방법은 무엇일까요?

디폴트로는 컨트롤러는 캐시이므로 컨트롤러는 1회만 기동합니다. 캐시를 ..config(..).state 해서 해 주세요.cache " " " option to " " option to " )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!')
  })
})

뷰에 특정 컨트롤러를 할당한 경우 뷰가 로드될 때마다 컨트롤러가 호출됩니다.이 경우 다음과 같이 컨트롤러에서 일부 코드를 호출 즉시 실행할 수 있습니다.

<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){ ... })

자세한 내용은 State Change Events를 참조하십시오.

저는 같은 문제에 직면했고, 여기에서는 이 행동의 이유를 같은 문제를 가진 다른 모든 사람들에게 남깁니다.

라이프 사이클 표시

성능을 향상시키기 위해 뷰 요소 및 스코프 데이터를 캐시하는 Ionic의 기능을 개선했습니다.컨트롤러가 초기화되면 앱 수명 내내 지속될 수 있으며, 워치 사이클에서 숨겨지고 제거됩니다.스코프를 재구축하고 있지 않기 때문에 워치 사이클을 다시 시작할 때 들어야 할 이벤트를 추가했습니다.

자세한 설명과 $ionic View이벤트를 보려면 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();
}); 

이는 다시 들어갈 때마다 보기를 종료하고 컨트롤러를 다시 실행하기 전에 캐시를 클리어하기 위한 것입니다.

이것은 아마 당신이 찾고 있던 것입니다.

Ionic은 뷰와 컨트롤러를 캐시합니다.기본값(최대 10) http://ionicframework.com/docs/api/directive/ionView/

컨트롤러가 이러한 이온 이벤트를 기반으로 특정 작업을 수행할 수 있도록 연결할 수 있는 이벤트가 있습니다.예에 대해서는, http://ionicframework.com/blog/navigating-the-changes/ 를 참조해 주세요.

카메라 탭을 선택하자마자 네이티브 카메라를 로딩하려고 할 때 ionic에서도 비슷한 문제가 있었습니다.camera 탭의 ion-view 컴포넌트(tabs.html)에 컨트롤러를 설정하고 카메라를 로드하는 $scope 메서드(add Image)를 호출하여 문제를 해결했습니다.

www/templates/tabs.html 내

  <ion-tab title="Camera" icon-off="ion-camera" icon-on="ion-camera" href="#/tab/chats" ng-controller="AddMediaCtrl" ng-click="addImage()">
    <ion-nav-view  name="tab-chats"></ion-nav-view>
  </ion-tab>

AddMediaCtrl에서 정의된 addImage 메서드는 사용자가 "카메라" 탭을 클릭할 때마다 네이티브 카메라를 로드합니다.각도 캐시의 아무것도 변경하지 않아도 동작합니다.이게 도움이 됐으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/27058276/run-a-controller-function-whenever-a-view-is-opened-shown

반응형