asp.net angular app导航栏未更新

时间:2017-09-06 09:50:30

标签: javascript asp.net angularjs

在我的应用程序中,我从服务器获取数据,包括菜单项。所以每个项目都有自己的菜单项。问题是菜单项没有按原样更新。当我检查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)
    ); */
};

}])

0 个答案:

没有答案