Angular 실행 방법페이지 로드 시 JS 컨트롤러 기능이 있습니까?

Angular 실행 방법페이지 로드 시 JS 컨트롤러 기능이 있습니까?

현재 검색 및 결과 표시가 가능한 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그럴 수 있어요. 앱의 에 따라 .

하였습니다.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 실실 an an an an an an an an an an an an 에서만 사용해야 합니다.ng-repeat(설명서에 따르면) 또한 코드가 아직 정의되지 않은 요소에 의존하는 경우 컨트롤러에서 직접 함수를 호출하면 오류가 발생할 수 있습니다.

이것이 내가 하는 일이고, 나에게도 효과가 있다.

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

용 unless unless unless unless unless unless unless unless를 사용하지 않는 한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 객체가 변경되는 것을 감시하고 싶은 경우 이 작업을 수행할 수 있습니다.$140을 사용합니다.$on도 다른 방법으로 동작합니다.특히 라우팅에 1페이지 모드가 설정되어 있는 경우는 더욱 그렇습니다.

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

angular의 $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에서 해결하고 서비스를 부트스트랩할 수 있습니다.즉, 서비스를 해결한 후에만 컨트롤러와 뷰를 로드합니다.

ui-internal의

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

드미트리 에브제프의 대답이 꽤 유용하다는 것을 알았다.

사례 1: angularJs만 사용:
페이지 로드 시 메서드를 실행하려면ng-initng-init의 angular Docs에 따라 무거운 함수의 사용은 권장되지 않는다고 말한 컨트롤러의 view and declar init 메서드에서는 다음과 같습니다.

이 지시어는 불필요한 양의 논리를 템플릿에 추가하기 위해 악용될 수 있습니다.ngInit의 적절한 용도는 아래 데모에서 볼 수 있듯이 ngRepeat의 특수 속성에 대한 에일리어스나 서버 측 스크립팅에 의한 데이터 주입 등 몇 가지뿐입니다.이러한 몇 가지 경우를 제외하고 스코프의 값을 초기화하려면 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.displaces를 설정합니다.

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

back button을 위해

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

self initialize 함수의 initial 메서드를 호출합니다.

(function initController() {

    // do your initialize here

})();

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