在 Angularjs 中加载页面时如何执行函数

Question

Best regards, I have a problem with a component, which is divided into app.component and its respective .html, I need a function to be executed when loading the page, when loading the modal that I have in this component, I tried with $ (document) .ready () , but it didn't work, I think it's a problem in the way I make the call, I don't understand very well how it still works,

<div class="row">
  <div class="col-md-12" style="text-align:center;">
   <a class="boton grande intermedio"  ng-touchstart="$ctrl.listConve()">Validar</a>
  </div>
</div>

but I need to load it in this select:

<div class="row">
  <div class="form-group" style="text-align:center;">
   <select class="form-control" id="convenio" name="selectConvenio"
           placeholder="Convenio" >
    <option selected>Elegir Convenio...</option>
    <option ng-repeat="option in $ctr.dataList">{{$option.nombreConvenio}}</option>
   </select>
  </div>
</div>

intente llamarlo de esta forma:

<script>
 $(document).ready(
   function(){
     alert('funciona');
     $ctrl.listConve()
   })
</script>

But it didn't work either.

Answer 1

Use the $onInit life-cycle hook in the controller:

app.controller("ctrl", function() {
    this.listConve = function() {
        //...
    };

    this.$onInit = function() {
        this.listConve();
    };
})

From the Docs:

Life-cycle hooks

Directive controllers can provide the following methods that are called by AngularJS at points in the life-cycle of the directive:

• $onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

For more information, see

• AngularJS Comprehensive Directive API Reference - Life-cycle Hooks