Sayfa yüklemesinde AngularJS denetleyici işlevi nasıl çalıştırılır?

Şu anda aramaya izin veren ve sonuçları görüntüleyen bir Angular.js sayfam var. Kullanıcı bir arama sonucunu, ardından geri düğmesini tıklar. Arama sonuçlarının tekrar görüntülenmesini istiyorum, ancak aramanın yürütülmesi için nasıl tetikleneceğini öğrenemiyorum. İşte detay:

• Angular.js sayfam, arama alanı ve arama düğmesi bulunan bir arama sayfasıdır. Kullanıcı elle bir sorgu yazıp bir düğmeye basabilir ve ajax sorgusu tetiklenir ve sonuçlar görüntülenir. URL'yi arama terimiyle güncelliyoruz. Hepsi iyi çalışıyor.
• Kullanıcı aramanın sonucunu tıklar ve farklı bir sayfaya yönlendirilir - bu da işe yarar.
• Kullanıcı geri düğmesini tıklar ve açısal arama sayfama geri döner ve arama terimi de dahil olmak üzere doğru URL görüntülenir. Tüm iyi çalışıyor.
• Arama alanı değerini URL'deki arama terimine bağladım, bu nedenle beklenen arama terimini içeriyor. Tüm iyi çalışıyor.

Kullanıcının "arama düğmesine" basmak zorunda kalmadan arama işlevinin yeniden yürütülmesini nasıl sağlayabilirim? Jquery olsaydı ben zaten zaten fonksiyonunda bir işlevi yürütmek. Angular.js eşdeğerini göremiyorum.

Bir yandan @ Mark-Rajcok'un dediği gibi, özel iç işlevden kurtulabilirsiniz:

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

Ayrıca ng-init yönergesine de bakabilirsiniz . Uygulama şöyle olacaktır:

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

Ancak, açısal belgelerin (v1.2'den beri) bunun için KULLANMAMASI gerektiği gibi dikkat ng-initedin. Ancak imo, uygulamanızın mimarisine bağlıdır.

ng-initArka uçtan bir değeri açısal uygulamaya geçirmek istediğimde kullandım :

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

Bunu dene?

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

Asla $viewContentLoadedbenim için çalışmaya başlayamadım ve ng-initgerçekten sadece ng-repeat(belgelere göre) kullanılmalıdır ve ayrıca bir işlev doğrudan denetleyicide çağırmak kod henüz tanımlanmamış bir öğeye dayanıyorsa hatalara neden olabilir .

Yaptığım şey bu ve benim için çalışıyor:

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

Eğer kullanmadığınız sürece ui-router. Sonra:

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

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

    // your code here

});

Dimitri'nin / Mark'ın çözümü benim için işe yaramadı ama $ timeout işlevini kullanmak, kodunuzun yalnızca biçimlendirme oluşturulduktan sonra çalışmasını sağlamak için iyi çalışıyor gibi görünüyor.

# Your controller, including $timeout

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

$timeout($scope.init)

Umarım yardımcı olur.

ViewContentLoaded DOM nesnesini değiştirmek ve sonra bir şeyler yapmak için izlemek istiyorsanız bunu yapabilirsiniz. $ scope. $ on kullanarak, özellikle yönlendirmenizde bir sayfa modu olduğunda çok farklı çalışır.

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

Açısal'ın $ window nesnesini kullanabilirsiniz:

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

Başka bir alternatif:

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

( https://stackoverflow.com/a/30258904/148412 aracılığıyla )

Bu sayfaya özgü bir denetleyiciniz varsa başka bir alternatif:

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

$ RouteProvider kullanırken .state üzerinde çözebilir ve hizmetinizi bootstrap edebilirsiniz. Bu, yalnızca Hizmetinizi çözdükten sonra Denetleyici ve Görünüm'ü yükleyeceğiniz anlamına gelir:

ui-rotalar

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

Hizmet

function ourBootstrapService() {

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

Dmitry Evseev cevap oldukça yararlı bulundu.

Durum 1: Tek başına angularjs kullanma:
sayfa yüklemesinde bir yöntemi uygulamak için kullanabilirsiniz ng-initağır fonksiyonun kullanımının gereğince, tavsiye edilmez dedi sahip denetleyici görünümü ve beyan init yönteminde açısal Dokümanlar ng-init üzerinde :

Bu yönerge, şablonlarınıza gereksiz miktarlarda mantık eklemek için kötüye kullanılabilir. Aşağıdaki demoda görüldüğü gibi ngRepeat'in özel özelliklerini yumuşatmak gibi ngInit'in yalnızca birkaç uygun kullanımı vardır; ve sunucu tarafı komut dosyası aracılığıyla veri enjekte etmek için. Bu birkaç durumun yanı sıra, kapsamdaki değerleri başlatmak için ngInit yerine denetleyiciler kullanmalısınız.

HTML:

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

Denetleyici:

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

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

    doSearch($routeParams.searchKeyword);
})

Uyarı: Bu denetleyiciyi, arama yönteminin burada da yürütülmesine neden olacağından farklı bir amaç anlamına gelen başka bir görünüm için kullanmayın.

Durum 2: İyonik kullanımı:
Yukarıdaki kod işe yarayacak, sadece görünüm önbelleğinin aşağıdaki gibi devre dışı bırakıldığından emin olun route.js:

route.js

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

Bu yardımcı olur umarım

Aynı sorunu yaşadım ve sadece bu çözüm benim için çalıştı (tam bir DOM yüklendikten sonra bir işlevi çalıştırır). Bu sayfa yüklendikten sonra tutturmak için kaydırma için kullanın:

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

                        // Your function that runs after all DOM is loaded

                    });

Arama sonuçlarını herhangi bir yerden kullanabileceğiniz ve başka bir sayfaya gittiğinizde temizlenmeyen ortak bir hizmete kaydedebilir ve ardından geri arama düğmesi için arama sonuçlarını kaydedilmiş verilerle ayarlayabilirsiniz

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

Backbutton'ınız için

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

kendini başlatma işlevi içindeki başlangıç ​​yöntemlerini çağırır.

(function initController() {

    // do your initialize here

})();