Hoe de AngularJS-controllerfunctie uitvoeren bij het laden van de pagina?

Momenteel heb ik een Angular.js-pagina waarmee je kunt zoeken en resultaten kunt weergeven. Gebruiker klikt op een zoekresultaat en klikt vervolgens op de terugknop. Ik wil dat de zoekresultaten opnieuw worden weergegeven, maar ik weet niet hoe ik de zoekopdracht moet activeren. Hier is het detail:

• Mijn Angular.js-pagina is een zoekpagina, met een zoekveld en een zoekopdracht
  knop. De gebruiker kan handmatig een zoekopdracht typen en op een knop drukken en
  en ajax-query wordt gestart en de resultaten worden weergegeven. Ik update de URL met de zoekterm. Dat werkt allemaal prima.
• Gebruiker klikt op een resultaat van de zoekopdracht en wordt naar een andere pagina geleid – dat werkt ook prima.
• Gebruiker klikt op de terugknop en gaat terug naar mijn hoekige zoekpagina, en de juiste URL wordt weergegeven, inclusief de zoekterm. Alles werkt prima.
• Ik heb de zoekveldwaarde gekoppeld aan de zoekterm in de URL, zodat deze de verwachte zoekterm bevat. Alles werkt prima.

Hoe zorg ik ervoor dat de zoekfunctie opnieuw wordt uitgevoerd zonder dat de gebruiker op de “zoekknop” hoeft te drukken? Als het jQuery was, zou ik een functie uitvoeren in de documentready-functie. Ik kan het equivalent van Angular.js niet zien.

Antwoord 1, autoriteit 100%

Aan de ene kant, zoals @Mark-Rajcok zei, je kunt gewoon wegkomen met een persoonlijke innerlijke functie:

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

Je kunt ook de ng-init-richtlijn bekijken. De implementatie zal er ongeveer zo uitzien:

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

Maar zorg erin om het te doen als hoekige documentatie impliceert (sinds v1.2) om niet te gebruiken ng-initvoor dat. IMO Het hangt echter af van de architectuur van uw app.

Ik heb ng-initgebruikt wanneer ik een waarde van back-end in de hoek-app wilde passeren:

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

Antwoord 2, Autoriteit 31%

Probeer dit?

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

Antwoord 3, Autoriteit 14%

Ik zou nooit kunnen krijgen $viewContentLoadedom voor mij te werken, en ng-initmoet echt alleen worden gebruikt in een ng-repeat( Volgens de documentatie kan en ook een functie rechtstreeks in een controller oproepen, kan fouten veroorzaken als de code afhankelijk is van een element dat nog niet is gedefinieerd.

Dit is wat ik doe en het werkt voor mij:

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

Tenzij u ui-routergebruikt. Dan is het:

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

Antwoord 4, Autoriteit 10%

angular.element(document).ready(function () {
    // your code here
});

Antwoord 5, Autoriteit 7%

Dimitri’s / Mark’s oplossing werkte niet voor mij, maar met behulp van de $ timeout functie lijkt Werk goed om ervoor te zorgen dat uw code alleen loopt nadat de markup wordt weergegeven.

# Your controller, including $timeout
var $scope.init = function(){
 //your code
}
$timeout($scope.init)

Ik hoop dat het helpt.

Antwoord 6, Autoriteit 6%

U kunt dit doen als u het gezichtContentLoaded DOM-object wilt bekijken om te veranderen en dan iets te doen. Met behulp van $ Scope. $ op werkt ook maar anders, vooral wanneer u één paginamodus op uw routering heeft.

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

Antwoord 7, Autoriteit 5%

U kunt het $ Window Object van Angular gebruiken:

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

Antwoord 8

Een ander alternatief:

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

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

Antwoord 9

Nog een ander alternatief als u een controller alleen specifiek hebt voor die pagina:

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

Antwoord 10

Als u $routeProvider gebruikt, kunt u uw service oplossen in .state en uw service opstarten. Dit wil zeggen dat u Controller en View alleen gaat laden nadat uw Service is opgelost:

ui-routes

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

Service

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

Antwoord 11

Ik vond het antwoord van Dmitry Evseev best nuttig.

Geval 1: Alleen angularJ’s gebruiken:

Om een methode uit te voeren bij het laden van de pagina, kunt u ng-initin de weergave gebruiken en de init-methode in de controller declareren, hoewel het gebruik van een zwaardere functie niet wordt aanbevolen, volgens de hoekige documenten op ng-init:

Deze richtlijn kan worden misbruikt om onnodige hoeveelheden logica aan uw sjablonen toe te voegen. Er zijn maar een paar geschikte toepassingen van ngInit, zoals voor het aliasen van speciale eigenschappen van ngRepeat, zoals te zien is in de onderstaande demo; en voor het injecteren van gegevens via server-side scripting. Naast deze paar gevallen, moet u controllers gebruiken in plaats van ngInit om waarden op een scope te initialiseren.

HTML:

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

controller:

app.controller('SearchCtrl', function(){
    var doSearch = function(keyword){
        //Search code here
    }
    doSearch($routeParams.searchKeyword);
})

WAARSCHUWING: Gebruik deze controller niet voor een andere weergave die bedoeld is voor een andere intentie, omdat de zoekmethode daar ook wordt uitgevoerd.

Case 2: Ionisch gebruiken:

De bovenstaande code werkt, zorg ervoor dat de weergave-cache is uitgeschakeld in de route.jsals:

route.js

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

Ik hoop dat dit helpt

Antwoord 12

Ik had hetzelfde probleem en alleen deze oplossing werkte voor mij (het loopt een functie nadat een complete dom is geladen). Ik gebruik dit voor scroll naar anker nadat de pagina is geladen:

angular.element(window.document.body).ready(function () {
                        // Your function that runs after all DOM is loaded
                    });

Antwoord 13

U kunt de zoekresultaten opslaan in een gemeenschappelijke dienst die van overal kan gebruiken en niet duidelijk is wanneer u naar een andere pagina kunt navigeren en kunt u de zoekresultaten instellen met de opgeslagen gegevens voor de knop Klik van de knop

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

Voor je terugknop

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

Antwoord 14

aanroep initiële methoden binnen de zelfinitialisatiefunctie.

(function initController() {
    // do your initialize here
})();