Bagaimana untuk mengeksekusi AngularJS controller pada fungsi beban halaman?

Di satu sisi sebagai @Mark-Rajcok mengatakan anda hanya bisa pergi dengan swasta dalam fungsi:

// 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();

Anda juga dapat melihat di ng-init direktif. Implementasi ini akan banyak seperti:

// 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
};

Tapi berhati-hati tentang hal itu sebagai sudut dokumentasi menyiratkan (sejak v1.2) untuk TIDAK menggunakan ng-init untuk itu. Namun imo itu tergantung pada arsitektur dari aplikasi anda.

Saya menggunakan ng-init ketika saya ingin lulus dengan nilai dari back-end ke sudut aplikasi:

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

Coba ini?

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

Aku tidak pernah bisa mendapatkan $viewContentLoaded bekerja untuk saya, dan ng-init harus benar-benar hanya dapat digunakan dalam sebuah ng-repeat (menurut dokumentasi), dan juga memanggil fungsi secara langsung di controller dapat menyebabkan kesalahan jika kode bergantung pada unsur yang belum't telah ditetapkan belum.

Ini adalah apa yang saya lakukan dan itu bekerja untuk saya:

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

Kecuali anda're menggunakan ui-router. Maka itu's:

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

Dimitri's/Mark's solusi didn't bekerja untuk saya, tapi menggunakan $timeout fungsi tampaknya bekerja dengan baik untuk memastikan kode anda hanya berjalan setelah markup yang diberikan.

# Your controller, including $timeout

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

$timeout($scope.init)

Semoga membantu.

Anda dapat melakukan ini jika anda ingin menonton viewContentLoaded objek DOM untuk mengubah dan kemudian melakukan sesuatu. menggunakan $scope.$pada karya-karya juga, tapi berbeda terutama ketika anda memiliki satu halaman pada mode routing.

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

Anda dapat menggunakan sudut's $objek jendela:

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

Alternatif lain:

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

(via https://stackoverflow.com/a/30258904/148412)

Alternatif lain jika anda memiliki controller hanya spesifik untuk halaman tersebut:

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

Ketika menggunakan $routeProvider anda dapat menyelesaikan .negara dan bootstrap layanan anda. Ini adalah untuk mengatakan, anda akan load Controller dan View, hanya setelah menyelesaikan Layanan anda:

ui-rute

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

Layanan

function ourBootstrapService() {

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

Ditemukan Dmitry Evseev menjawab cukup berguna.

Kasus 1 : Menggunakan angularJs sendiri:
Untuk melaksanakan metode pada beban halaman, anda dapat menggunakan ng-init dalam melihat dan menyatakan init metode kontroler, yang mengatakan bahwa penggunaan berat fungsi ini tidak dianjurkan, sesuai sudut Docs di ng-init:

direktif Ini dapat disalahgunakan untuk menambahkan yang tidak perlu jumlah dari logika ke dalam template anda. Hanya ada beberapa penggunaan yang tepat dari ngInit, seperti untuk aliasing sifat khusus dari ngRepeat, seperti yang terlihat pada demo di bawah ini, dan untuk menyuntikkan data melalui server side scripting. Selain itu beberapa kasus, anda harus menggunakan kontroler daripada ngInit untuk menginisialisasi nilai-nilai pada ruang lingkup.

HTML:

<div ng-controller="searchController()">

</div>

Controller:

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

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

    doSearch($routeParams.searchKeyword);
})

Peringatan : tidak menggunakan controller ini untuk pandangan lain dimaksudkan untuk niat yang berbeda karena akan menyebabkan metode pencarian yang akan dieksekusi di sana juga.

Kasus 2 : Menggunakan Ionik:
kode di atas akan bekerja, pastikan view cache dinonaktifkan dalam route.js sebagai:

route.js

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

Semoga ini bisa membantu

Aku punya masalah yang sama dan satu-satunya solusi ini bekerja untuk saya (itu menjalankan fungsi setelah menyelesaikan DOM telah dimuat). Saya menggunakan ini untuk gulir ke jangkar setelah halaman telah dimuat:

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

                        // Your function that runs after all DOM is loaded

                    });

Anda dapat menyimpan hasil pencarian dalam layanan umum yang dapat digunakan dari mana saja dan doesn't jelas ketika menavigasi ke halaman lain, dan kemudian anda dapat menetapkan hasil pencarian dengan data yang disimpan untuk klik tombol kembali

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

Untuk anda backbutton

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

memanggil metode awal dalam diri menginisialisasi fungsi.

(function initController() {

    // do your initialize here

})();