페이지로드시 AngularJS 컨트롤러 기능을 실행하는 방법은 무엇입니까?

페이지로드시 AngularJS 컨트롤러 기능을 실행하는 방법은 무엇입니까?

---

현재 검색 및 결과를 표시하는 Angular.js 페이지가 있습니다. 사용자는 검색 결과를 클릭 한 다음 뒤로 버튼을 클릭합니다. 검색 결과를 다시 표시하고 싶지만 검색을 실행하는 방법을 알아낼 수 없습니다. 세부 사항은 다음과 같습니다.

• My Angular.js 페이지는 검색 필드와 검색 버튼이있는 검색 페이지입니다. 사용자는 쿼리를 수동으로 입력하고 버튼을 누르면 Ajax 쿼리가 시작되고 결과가 표시됩니다. 검색어로 URL을 업데이트합니다. 모든 것이 잘 작동합니다.
• 사용자가 검색 결과를 클릭하면 다른 페이지로 이동합니다.
• 사용자가 뒤로 버튼을 클릭하고 내 각도 검색 페이지로 돌아 가면 검색어를 포함한 올바른 URL이 표시됩니다. 모두 잘 작동합니다.
• 검색 필드 값을 URL의 검색어에 바인딩 했으므로 예상 검색어가 포함됩니다. 모두 잘 작동합니다.

사용자가 "검색 버튼"을 누르지 않아도 검색 기능을 다시 실행하려면 어떻게해야합니까? jquery 인 경우 documentready 함수에서 함수를 실행합니다. Angular.js에 해당하는 것을 볼 수 없습니다.

---

한편으로 @ Mark-Rajcok은 개인 내부 기능으로 도망 갈 수 있다고 말했습니다.

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

또한 ng-init 지시문을 살펴볼 수 있습니다 . 구현은 다음과 같습니다.

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

그러나 각도 문서는 (v1.2부터) 사용하지 않기 때문에 주의하십시오 ng-init. 그러나 imo는 앱의 아키텍처에 따라 다릅니다.

ng-init백엔드에서 각도 앱으로 값을 전달하려고 할 때 사용했습니다 .

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

---

이 시도?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

---

나는 $viewContentLoaded나를 위해 일할 수 없었고 ng-init실제로 ng-repeat(문서에 따르면) 에만 사용해야 하며 컨트롤러에서 직접 함수를 호출하면 코드가 아직 정의되지 않은 요소에 의존하는 경우 오류가 발생할 수 있습니다 .

이것이 내가하는 일이며 나를 위해 일합니다.

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

하지 않는 한 당신이 사용하고 ui-router. 그런 다음 :

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

---

angular.element(document).ready(function () {

    // your code here

});

---

Dimitri 's / Mark의 솔루션은 저에게는 효과가 없었지만 $ timeout 함수를 사용 하면 마크 업이 렌더링 된 후에 만 ​​코드가 실행되도록하는 것이 좋습니다.

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

도움이 되길 바랍니다.

---

viewContentLoaded DOM 객체를보고 변경 한 후 수행하려는 경우이 작업을 수행 할 수 있습니다. $ scope. $ on을 사용하면 라우팅에 하나의 페이지 모드가있는 경우 특히 다르게 작동합니다.

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });

---

각도의 $ window 객체를 사용할 수 있습니다.

$window.onload = function(e) {
  //your magic here
}

---

다른 대안 :

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

( https://stackoverflow.com/a/30258904/148412 를 통해 )

---

해당 페이지에만 컨트롤러가있는 경우 또 다른 대안 :

(function(){
    //code to run
}());

---

$ routeProvider를 사용하면 .state를 해결하고 서비스를 부트 스트랩 할 수 있습니다. 즉, 서비스를 해결 한 후에 만 ​​Controller 및 View를로드하려고합니다.

UI 라우팅

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

서비스

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

---

Dmitry Evseev의 답변이 매우 유용하다는 것을 알았습니다.

사례 1 : angularJs 단독 사용 :
페이지로드에서 메소드를 실행하려면 ng-init컨트롤러에서보기 및 init 메소드를 선언 할 수 있습니다 .ng -init 의 각도 문서에 따라 더 무거운 함수를 사용하지 않는 것이 좋습니다 .

이 지시문은 템플릿에 불필요한 양의 로직을 추가하기 위해 남용 될 수 있습니다. 아래 데모에서 볼 수 있듯이 ngRepeat의 특수 속성 앨리어싱과 같이 ngInit의 적절한 용도는 몇 가지뿐입니다. 서버 측 스크립팅을 통해 데이터를 주입합니다. 이러한 몇 가지 경우 외에도 ngInit 대신 컨트롤러를 사용하여 범위의 값을 초기화해야합니다.

HTML :

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

제어 장치:

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

경고 : 이 컨트롤러를 다른 의도로 다른 의도로 사용하면 검색 방법도 실행되므로 다른 의도로 사용하지 마십시오.

사례 2 : Ionic 사용 :
위 코드는 작동합니다.보기 캐시가 다음 route.js과 같이 비활성화되어 있는지 확인하십시오 .

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

도움이 되었기를 바랍니다

---

나는 같은 문제가 있었고이 솔루션 만 나를 위해 일했다 (완전한 DOM 이로 드 된 후에 함수를 실행한다). 페이지가로드 된 후 앵커로 스크롤하기 위해 이것을 사용합니다.

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });

---

어디에서나 사용할 수있는 공통 서비스에 검색 결과를 저장할 수 있으며 다른 페이지로 이동할 때 지워지지 않으며 뒤로 버튼을 클릭하기 위해 저장된 데이터로 검색 결과를 설정할 수 있습니다

function search(searchTerm) {
    // retrieve the data here;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

백 버튼

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}

---

자체 초기화 함수 내에서 초기 메소드를 호출하십시오.

(function initController() {

    // do your initialize here

})();

참고 URL : https://stackoverflow.com/questions/15458609/how-to-execute-angularjs-controller-function-on-page-load