个人中心
gpt4 book ai didi

html - ui-router 在访问页面时在我的 ui-views 中显示原始代码

转载 作者：可可西里 更新时间：2023-11-01 13:23:48 25 4
gpt4 key购买 nike

这是我第一次使用 ui-router，我发现在处理路由和重新加载某些状态时遇到困难。我希望任何人都可以帮助我。

我的 index.html 概览

<html ng-app="resApp">
   <head></head>
   <body ng-controller="mainCtrl" ng-cloak>
     <div ng-show="showCustomerContent">  
         <div id="page-wrapper">
              <div ui-view="header"></div>
              <div ui-view="slider" ng-show="displaySlider"></div>
              <div ui-view="content"></div>
              <div ui-view="footer"></div>
         </div>
     </div>

     <div ng-show="showAdminContent">
          <div id="page-wrapper">
              <div ui-view="aheader"></div>
              <div ui-view="asidebar"></div>
              <div id="page-content-wrapper">
              <div id="page-content">
                   <div class="container-fluid">
                       <div ui-view="acontent"></div>
                   </div>
              </div>
     </div>
     <div ui-view="jsincludes"></div>

   </body>
</html>

routing.js

    'use strict'
        resApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider','$locationProvider',function ($stateProvider,   $urlRouterProvider, $httpProvider,$locationProvider) {
                $urlRouterProvider
                .when('/','/Home')
                .when('/login','/Home')
                .otherwise('/Home');

                $stateProvider
                .state("home",{
                url:'/Home',
                views:{
                    'jsincludes':{
                        templateUrl:'views/includes/jsincludes.html'
                    },
                    'header':{
                        templateUrl:'views/customer_part/header.html',
                    controller:'headerCtrl'
                    },
                    'slider':{
                        templateUrl:'views/customer_part/slider.html'
                    },
                    'footer':{
                        templateUrl:'views/customer_part/footer.html'
                    }
                }

              })
              .state("home.aboutus",{
                 url:"/AboutUs",
                 views:{
                     'content@':{
                     templateUrl:'views/customer_views/aboutus.html',
                     controller:'aboutusCtrl'
                          }
                       }
              })
              $httpProvider.useApplyAsync(true);
         }]);

controller.js

'use strict'
resApp.controller('mainCtrl',['$scope','$location','UserData','$rootScope',function($scope,$location,UserData,$rootScope){
    $rootScope.displaySlider = true;
    $scope.$on('$stateChangeSuccess',function(event, toState){
        var url = $location.absUrl().split('/');
        //console.log(url);
        if(url.length > 6){
            $rootScope.displaySlider = false;
        }else{
            $rootScope.displaySlider = true;
        }

    });

    UserData.getSessVar().then(function(msg){
        if(msg.data!="none"){
            $rootScope.uid = msg.data["uid"];
            $rootScope.fullname = msg.data["fullname"];
            $rootScope.role = msg.data["role"];
            $rootScope.Id = msg.data["Id"];
            if($rootScope.role == "customer"){
                $scope.showCustomerContent = true;
            }else{
                $scope.showAdminContent = true;
            }
        }else{
            $rootScope.role = "none";
            $scope.showCustomerContent = true;
        }

    });


}]);
resApp.controller('headerCtrl',['$scope','$rootScope','UserData','$location','$state','$stateParams',function($scope,$rootScope,UserData,$location,$state,$stateParams){
    $scope.hideLoginBtn = false;
    if($rootScope.uid!=undefined){
        $scope.hideLoginBtn = true;
    }

    $scope.logout = function(){
        UserData.logoutUser($rootScope.Id).then(function(msg){
            if(msg.data=="success"){
                window.location.reload();
                //$location.path('/Home');
            }
        });
    }

    $scope.home = function(){
        $state.go('home', {}, { reload: true });
    }

    $scope.aboutus = function(){
        $state.go('home.aboutus',{},{reload:true});
    }
}]);

resApp.controller('aheaderCtrl',['$scope','$rootScope','UserData','$location',function($scope,$rootScope,UserData,$location){
    $scope.logout = function(){
        UserData.logoutUser($rootScope.Id).then(function(msg){
            if(msg.data=="success"){
                window.location.reload();
                //$location.path('/Home');
            }

        });
    }
}]);

在我的 header.html 中有这段代码

<li>
    <a href="" title="Home" ng-click="home()">
       Home
    </a>
</li>

Image when I click Home

每当我单击 Home 时，index.html 都会显示我的页眉和 slider 的另一个副本。正如您在图像中看到的那样，显示了 {{fullname}} 范围以及其他 ui-views。我尝试执行 ui-sref="home"ui-sref-opts="{reload: true, notify: true}" 并将其放入我的 anchor 标记中，但结果是一样的。我需要重新加载页面，因为如果我只是执行 ui-sref="home"，我的 slider 不会显示。我还尝试使用 ng-cloak 但每当我单击 anchor 标记时，它也会在 angularjs 中显示我的原始代码。呈现整个页面时，显示的原始代码消失。谁能帮我这个？

更新这个错误只出现在 mozilla firefox 中。我的路由在 chrome 中非常好

最佳答案

以下代码中存在 div 标签关闭问题

<div ng-show="showAdminContent">
          <div id="page-wrapper">
              <div ui-view="aheader"></div>
              <div ui-view="asidebar"></div>
              <div id="page-content-wrapper">
              <div id="page-content">
                   <div class="container-fluid">
                       <div ui-view="acontent"></div>
                   </div>
              </div>
     </div>

如下修改

<div ng-show="showAdminContent">
          <div id="page-wrapper">
              <div ui-view="aheader"></div>
              <div ui-view="asidebar"></div>
              <div id="page-content-wrapper">
              <div id="page-content">
                   <div class="container-fluid">
                       <div ui-view="acontent"></div>
                   </div>
              </div>
         </div>
</div>

此外，我不确定为什么要将页眉、页脚和 slider 保留为命名的 ui-view，而您可以使用简单的 ng-include 实现相同的目的。仅将路由用于重定向和超链接。

引用我的plunker如何做

https://plnkr.co/edit/ZatFwz83ODsPjy55eRc5?p=preview

关于html - ui-router 在访问页面时在我的 ui-views 中显示原始代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42545147/

25 4 0
文章推荐： .net - 在 Win7 中使用不带注册表的 COM Exe 服务器
文章推荐： php - Laravel 5.5 - 事件上的 SerializesModels 导致 ModelIdentifier 错误？
文章推荐： php - Laravel 中 NPM、Composer 和 Bower 的区别？
文章推荐： windows - 通过 Windows Script Host 使用 UTF-8 编码运行 JScript 或 VBScript 文件时出现问题
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com