In my app I am getting data from server including the menu items. So each item has its own menu items. The thing is the menu items are not being updated as they should be. When I check in the JS side the menu items do updated in accordance to the current item being displayed but the menu items in the view (html) are not being updated.
Here is my html code
<div ng-app="WebInterfaceApp">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="owl-carousel visible-xs" carousel ng-controller="HomeController">
<carousel-item ng-repeat="page in movies.pages" ng-class="{'active': selectedMenu == page.name }" class="item sliderImage">
<div id="sliderImage">
<a class="my_menu" data-toggle="tab" href="javascript:void(0)" ng-click="topMenuAction(page.name, $index)">{{page.name}}</a>
</div>
</carousel-item>
</div>
</nav>
<ajaxloader></ajaxloader>
<div id="ui-view" ui-view></div>
</div>
My JS code is this
angular.module('WebInterfaceApp', ['ui.router','youtube-embed','ngTouch'])
.config(['$stateProvider', '$locationProvider', '$httpProvider', function ($stateProvider, $locationProvider, $httpProvider) {
$stateProvider
.state('All', {
url: '/:itemId',
templateUrl: '/Home/Landing',
controller: 'HomeController'
}).state('Landing', {
url: '/',
templateUrl: '/Home/Landing',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
$httpProvider.defaults.timeout = 10000;
}])
.service('WebInterfaceService', ['$http', function ($http) {
console.log("webservice");
this.getTagItems = function (tag) {
return fromAPi;
};
this.getTagItemPage = function (tag, page, pageNo) {
return fromAPi;
};
this.startLoader = function () {
$('ajaxLoader').css('position', 'absolute');
$('ajaxLoader').height($('[ui-view]').height() < 100 ? $(window).height() : $('[ui-view]').height());
$('ajaxLoader').width($('[ui-view]').width() < 100 ? $(window).width() : $('[ui-view]').width());
$('ajaxLoader').html('<div style="z-index: 999;position: absolute;margin-top: 20%;margin-left: 50%;"><img src="~/Content/images/ajax-loader.gif" />LOADING...</div>').show();
};
this.stopLoader = function () {
$('ajaxLoader').hide();
};
}])
.controller('HomeController', ['$rootScope', '$scope', '$location', 'WebInterfaceService', function ($rootScope, $scope, $location, WebInterfaceService) {
$scope.flag = true;
if ($location.path() == '/') {
$location.path('United Kingdom');
}
$scope.setData = function (data) {
console.log(data);
$scope.movies = data;
};
$rootScope.selectedMenu = 'Overview';
$scope.topMenuAction = function (name, index) {
// Begin our infinite scroll from the top
window.scrollTo(0, 0);
$rootScope.selectedMenu = name;
// Load sections for current page
var page = $scope.movies.pages[index];
page.sectionsLoaded = false;
$scope.sectionManage(index);
//window.scrollTo(0, 1); //TODO - needs to be fixed as doesn't work on a phone per Chrome
};
$scope.linkAction = function (act) {
$location.path(act);
};
$scope.tagAction = function (tag) {
WebInterfaceService.getTagItems(tag)
.success(function (tagItems) {
$scope.movies = tagItems;
var scope = angular.element($('[ng-controller="HomeController"]')).scope();
scope.setData(tagItems);
// Load sections for the first page
$scope.sectionManage(0);
})
.error(function (error) {
$scope.status = 'Unable to load movie data: ' + error.message;
console.log($scope.status);
});
};
$scope.tagAction($location);
$scope.test =function(){
console.log("hover");
};
$scope.pageManage = function(direction,page,index){
if (page !== undefined && $scope.flag === true) {
$scope.topMenuAction(page, index);
}
else{
console.log("You are now in last/First");
}
console.log("direction-"+direction+'page-'+page);
};
// Function for loading sections for specific page in background
$scope.sectionManage = function (pageIndex) {
// If index is out of bound, just return
if (pageIndex >= $scope.movies.pages.length)
return;
// Internal loop function, which is called after every ajax request if we need to load more sections
var loop = function () {
var page = $scope.movies.pages[pageIndex];
// Number of section which will be loaded next
var pageNo = page.sections.length;
// If we already loading some sections, or already loaded all available sections, just return
if (page.loadingSections || page.sectionsLoaded)
return;
// Set this as true to avoid many background requests
page.loadingSections = true;
WebInterfaceService.getTagItemPage($location, pageIndex, pageNo)
.success(function (sections) {
// Add each received section to our page
angular.forEach(sections, function (section) {
page.sections.push(section);
});
// Set this as false to be able load new sections on the next time
page.loadingSections = false;
// If we get some sections
if (sections.length > 0) {
// And our bottom anchor is still visible (which means that we have empty space from the bottom)
if ($scope.isBottomAnchorInViewport()) {
// Go to another iteration and call the function again
loop();
}
} else {
// If we get empty sections array, that all available sections already loaded
page.sectionsLoaded = true;
}
})
.error(function (error) {
$scope.status = 'Unable to load page data: ' + error.message;
console.log($scope.status);
page.loadingSections = false;
})
}
// Trigger this function for first iteration
loop();
};
// Function for checking that our bottom anchor is still visible or not (which means that we have empty space from the bottom)
$scope.isBottomAnchorInViewport = function () {
/* var rect = angular.element('#bottomAnchor')[0].getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight+500 || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
); */
};
}])
