12

I have seen a few exmaples on stack overflow about this ng-init issue, although I cant seem to find one which references it with the use of a controller.

I have called the function in the controller by having the following in the html file

<div class="tab-container" ng-controller = "ExampleController" ng-init = "init()" >

In the controller:

$scope.init = function(){

        alert("do something");
};

It does run, but it runs before the components have loaded on the screen.

Am i missing something?

Thanks

Anton Hughes
  • 1,845
  • 4
  • 21
  • 32
  • You have the same problem with an issue here [enter link description here][1] [1]: http://stackoverflow.com/questions/17104639/ng-init-ng-controller-strange-behavior-in-the-controllers-scope – ThomasP1988 Jul 11 '14 at 10:10
  • I am puzzled by this question, is it a problem that it works the way you have observed that it works (and as it is designed to work?)... What answer are you looking for besides the one @Mosho provided??? – Jens Jul 11 '14 at 10:34
  • please take your time to review the answers and choose a correct one (or add your solution, if different). – domokun Jul 21 '14 at 15:22

2 Answers2

15

ng-init is supposed to work like this, because it's used to initialize data.

A very simple example: 

<ul ng-init="list = [1,2,3,4]">
  <li ng-repeat="l in list"></li>
</ul>

If you are trying to run something while your controller loads, it's actually much simpler than you thought:

app.controller('mainCtrl', function ($scope) {

  var init = function ($scope) {
    // do whatever you need to do to initialize your controller
    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')
  }

  init()

})

Or even simpler, if you don't need the function (no closures or whatever) 

app.controller('mainCtrl', function ($scope) {

  // do whatever you need to do to initialize your controller
  $scope.someData = ["Hey", "I'm", "Alive"]
  $scope.otherData = localStorage.getItem('myBackup')

})

Edit - assuming you're using ngView:
To have the code run on when the page is fully loaded you should set a watcher on the event $viewContentLoaded, like this:

  $scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
  });

app.controller('mainCtrl', function ($scope) {

  // This event is triggered when the view has finished loading
  $scope.$on('$viewContentLoaded', function() {

    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')      

  })    
})
domokun
  • 3,013
  • 3
  • 29
  • 55
  • 2
    Using ng-init in this way can in some cases be useful to transport serverside variables into your initial index.html though, e.g. ng-init="init(@razorVariable)", obviously there is alternatives to that, but I find this approach rather clean actually. We have used it quite a bit in transitioning an existing App into an SPA app. Ones fully done there probably won't be that many things to initialize in this way, but one can never truly rule this out. – Jens Jul 11 '14 at 10:31
  • Thank you @domokun for your reply, I have tried the second method you mentioned there and it still runs before the controller has fully set all the componets on the screen. Is there anywhy I can ask it to wait until everything has loaded, then run the init code? – Anton Hughes Jul 11 '14 at 11:05
  • @AntonHughes I understand. Take a look to the code I've added in my edit – domokun Jul 11 '14 at 11:38
-1

another option is using jquery. It would fit if you depend on many elements. But make sure to load jquery with a version of your choice to project. loading jquery (insert version where it's ...):

<script src="https://code.jquery.com/jquery-..."></script>

the js code:

$(document).ready(function() { 
        alert("do something");
    });
haiatn
  • 15
  • 3