ng-init函数调用了1000多次

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

Answer 1

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.

Answer 2

问题是我要为状态和指令放置相同的模板