I am encountering a problem with app.run(). On the main page, app.run() is functioning properly. However, when I click on the Events menu button and navigate to the events.html page, app.run() does not work initially. It only starts working after I reload the page. Both the main.html and events.html pages are within the ngView, and the menu is also within the ngView.
controller.js
afroEarthApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'template/home.html',
controller:'afroEarthMainCtrl'
})
.when('/events',{
templateUrl:'template/events.html',
controller:'eventsCtrl'
})
.when('/sites/:niche', {
templateUrl:'template/single.html',
controller:'SingleCtrl'
})
.otherwise({
redirectTo: '/'
})
}]);
afroEarthApp.controller('afroEarthMainCtrl',['$scope','$http','$location','$cookies', '$rootScope', '$route', function($scope, $http, $location, $cookies, $rootScope, $route) {
...some code...
}]);
afroEarthApp.controller('eventsCtrl',['$scope','$http','$location','$cookies', '$rootScope', '$route', function($scope, $http, $location, $cookies, $rootScope, $route) {
...some code...
}]);
afroEarthApp.run(['$log', '$rootScope', '$route', function ($log, $rootScope, $route) {
$rootScope.$on('$viewContentLoaded', function ($rootScope, $route) {
...some code...
})
}]);
home.html
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#websites">Lifestyle sites</a></li>
<li><a class="page-scroll" href="stories">Success Stories</a></li>
<li><a href="#/events" data-target="#events" target="_self">Events</a></li>
<li><a class="page-scroll" ng-href="http://{{singleNiche.url}}.afroearth.com/login/">Login</a></li>
<li class="other-countries">
<a href="#">
{{singleNiche.country}}<img src="{{singleNiche.countryFlag}}"><i class="icon-caret-down"></i>
</a>
<ul>
<li ng-repeat="country in singleNiche.countries"><a ng-click="setCountry(country.url)" >{{country.name}}</a></li>
</ul>
</li>
</ul>
I would appreciate any help with this issue.