ng-init function called 1000+ times

Question

I have a module like this :

angular.module('BlurAdmin.pages.calendar', [])
    .config(routeConfig);

/** @ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('calendar', {
            url: '/calendar',
            templateUrl : 'http://localhost:8080/gestionprojet/dashboardCalendar',
            title: 'Calendrier'
        })


}

And a directive :

angular.module('BlurAdmin.pages.dashboard')
      .directive('dashboardCalendar', dashboardCalendar);

  /** @ngInject */
  function dashboardCalendar() {
    return {
      restrict: 'E',
      controller: 'DashboardCalendarCtrl',
      templateUrl: 'http://localhost:8080/gestionprojet/dashboardCalendar'
    };
  }

And a Controller :

angular.module('BlurAdmin.pages.dashboard')
          .controller('DashboardCalendarCtrl', DashboardCalendarCtrl);

      /** @ngInject */
      function DashboardCalendarCtrl(baConfig, $uibModal, $scope, eventFactory) {
            /**
 * Get Events
 */
$scope.getEvents = function () {
  eventFactory.getEvents()
      .success(function (data) {
        $scope.userEvents = data;
        $scope.userEvents = $scope.renderEventJSonToFullCalendar($scope.userEvents);
      })
      .error(function (data, status) {
        console.log("fail : " + data);
        $scope.errorMessage = "Erreur lors du chargement des évènements : " + data + ' ' + status;
      })
};
}

And In a partial page I'm init the function in my controller with :

<div ng-init="getEvents()">
  <dashboard-calendar>
    <div id='calendar' class="blurCalendar"></div>
  </dashboard-calendar>
</div>

Here the function is getting called a 1000 times and counting even when I'm not loading the directive page...

What's the problem here cause I ain't seeing one. Thank you

If you set a breakpoint in `getEvents` you could look at your stack trace to see what's calling it. — adamdport, Jan 10 '17 at 19:57

score 0 · Answer 1 · answered Jan 10 '17 at 20:04

0

Rather than using ng-init, you should be using resolve in your state definitions:

$stateProvider
  .state('calendar', {
      url: '/calendar',
      templateUrl : 'http://localhost:8080/gestionprojet/dashboardCalendar',
      title: 'Calendrier',
      resolve: {
        myEvents: function(eventFactory){
         return eventFactory.getEvents();
        }
      }
    })

myEvents will then be available in your controller as a dependency.

answered Jan 10 '17 at 20:04

adamdport

11,687
14
69
91

There are a million ways to make something work, but only a handful of *good* ways. No experienced angular dev would ever suggest loading data via your templates. Regardless, glad you got it working! – adamdport Jan 11 '17 at 15:27
You mean just about `resolve` or I'm doing it all wrong? – OddDev Jan 11 '17 at 15:30
And while we're at it, what's the best way to initialize a table I mean like `ng-init=''getTablesData() '' ` – OddDev Jan 11 '17 at 15:33
If it's data that's required by the controller, resolve it in your state definitions. If you need to call it multiple times (like for pagination), I'd inject your service/factory into the controller and call it when you need to *from your controller*. [The docs for `ng-init`](https://docs.angularjs.org/api/ng/directive/ngInit) say this in big red letters right at the top. – adamdport Jan 11 '17 at 16:12

score 0 · Accepted Answer · answered Jan 10 '17 at 21:11

0

The problem is I'm putting the same template for the state and the directive

answered Jan 10 '17 at 21:11

OddDev

1,521
7
23
45

ng-init function called 1000+ times

2 Answers2