Bagaimana cara menjalankan fungsi pengontrol AngularJS pada pemuatan halaman?

Saat ini saya memiliki halaman Angular.js yang memungkinkan pencarian dan menampilkan hasil. Pengguna mengklik hasil pencarian, lalu mengklik tombol kembali. Saya ingin hasil pencarian ditampilkan lagi tetapi saya tidak dapat menemukan cara untuk memicu pencarian untuk dieksekusi. Inilah detailnya:

• Halaman Angular.js saya adalah halaman pencarian, dengan bidang pencarian dan tombol pencarian. Pengguna dapat secara manual mengetik kueri dan menekan tombol dan dan ajax kueri dipecat dan hasilnya ditampilkan. Saya memperbarui URL dengan istilah pencarian. Itu semua bekerja dengan baik.
• Pengguna mengklik hasil pencarian dan dibawa ke halaman lain - yang berfungsi dengan baik juga.
• Pengguna mengklik tombol kembali, dan kembali ke halaman pencarian sudut saya, dan URL yang benar ditampilkan, termasuk istilah pencarian. Semua berfungsi dengan baik.
• Saya telah mengikat nilai bidang pencarian ke istilah pencarian di URL, sehingga mengandung istilah pencarian yang diharapkan. Semua berfungsi dengan baik.

Bagaimana cara mendapatkan fungsi pencarian untuk dieksekusi lagi tanpa pengguna harus menekan "tombol pencarian"? Jika itu jquery maka saya akan menjalankan fungsi dalam fungsi documentready. Saya tidak dapat melihat padanan Angular.js.

Di satu sisi seperti @ Mark-Rajcok katakan Anda hanya bisa pergi dengan fungsi batin pribadi:

// 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 arahan ng-init . Implementasinya akan sangat mirip:

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

Tetapi berhati-hatilah karena itu menyiratkan dokumentasi sudut (karena v1.2) untuk TIDAK digunakan ng-inituntuk itu. Namun demikian itu tergantung pada arsitektur aplikasi Anda.

Saya menggunakan ng-initketika saya ingin memberikan nilai dari back-end ke aplikasi sudut:

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

Coba ini?

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

Saya tidak pernah bisa $viewContentLoadedbekerja untuk saya, dan ng-initharus benar-benar hanya digunakan dalam ng-repeat(sesuai dengan dokumentasi), dan juga memanggil fungsi langsung di controller dapat menyebabkan kesalahan jika kode bergantung pada elemen yang belum didefinisikan. .

Inilah yang saya lakukan dan ini bekerja untuk saya:

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

Kecuali Anda menggunakan ui-router. Maka itu:

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

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

    // your code here

});

Solusi Dimitri / Mark tidak berfungsi untuk saya tetapi menggunakan fungsi $ timeout tampaknya berfungsi dengan baik untuk memastikan kode Anda hanya berjalan setelah markup diberikan.

# Your controller, including $timeout

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

$timeout($scope.init)

Semoga ini bisa membantu.

Anda dapat melakukan ini jika Anda ingin menonton objek DOM viewContentLoaded berubah dan kemudian melakukan sesuatu. menggunakan $ scope. $ on berfungsi juga tetapi berbeda terutama ketika Anda memiliki satu mode halaman pada perutean Anda.

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

Anda dapat menggunakan objek $ window angular:

$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 pengontrol khusus untuk halaman itu:

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

Saat menggunakan $ routeProvider Anda dapat menyelesaikan .state dan mem-bootstrap layanan Anda. Ini artinya, Anda akan memuat Pengontrol dan Tampilan, hanya setelah menyelesaikan Layanan Anda:

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

Layanan

function ourBootstrapService() {

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

Jawaban Dmitry Evseev yang ditemukan cukup berguna.

Kasus 1: Menggunakan angularJs saja:
Untuk mengeksekusi metode pada pemuatan halaman, Anda dapat menggunakan ng-initdalam view dan mendeklarasikan metode init di controller, karena mengatakan bahwa penggunaan fungsi yang lebih berat tidak disarankan, seperti pada Documents angular pada ng-init :

Arahan ini dapat disalahgunakan untuk menambahkan jumlah logika yang tidak perlu ke dalam templat Anda. Hanya ada beberapa kegunaan ngInit yang tepat, seperti untuk aliasing properti khusus ngRepeat, seperti yang terlihat dalam demo di bawah ini; dan untuk menyuntikkan data melalui skrip sisi server. Selain beberapa kasus ini, Anda harus menggunakan pengontrol daripada ngInit untuk menginisialisasi nilai pada lingkup.

HTML:

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

Pengendali:

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

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

    doSearch($routeParams.searchKeyword);
})

Peringatan: Jangan gunakan pengontrol ini untuk tampilan lain yang dimaksudkan untuk maksud berbeda karena akan menyebabkan metode pencarian dieksekusi di sana juga.

Kasus 2: Menggunakan Ionic:
Kode di atas akan berfungsi, pastikan cache tampilan dinonaktifkan route.jssebagai:

route.js

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

Semoga ini membantu

Saya memiliki masalah yang sama dan hanya solusi ini yang bekerja untuk saya (ini menjalankan fungsi setelah DOM lengkap telah dimuat). Saya menggunakan ini untuk gulir ke jangkar setelah halaman dimuat:

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

                        // Your function that runs after all DOM is loaded

                    });

Anda dapat menyimpan hasil pencarian di layanan umum yang dapat digunakan dari mana saja dan tidak jelas saat menavigasi ke halaman lain, dan kemudian Anda dapat mengatur hasil pencarian dengan data yang disimpan untuk klik tombol kembali

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

Untuk tombol punggung Anda

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

memanggil metode awal di dalam fungsi inisialisasi diri.

(function initController() {

    // do your initialize here

})();