在我的应用程序中,我从服务器获取数据,包括菜单项。所以每个项目都有自己的菜单项。问题是菜单项没有按原样更新。当我检查JS端时,菜单项根据当前显示的项目进行更新,但视图(html)中的菜单项没有更新。
这是我的HTML代码
<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>
我的JS代码就是这个
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)
); */
};
}])