个人中心
gpt4 book ai didi

javascript - 在 angularjs 中有不同的页眉和页脚的最佳方法是什么？

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:48:03 24 4
gpt4 key购买 nike

我正在使用 angular js 单页应用程序。我有共同的页眉和页脚，我的 ng-view 根据路由变化。现在我需要一个包含不同页眉和页脚的页面。我如何修改当前页面以包含它。

我有一个包含 ng-include="shell.html"的页面和 shell.html 有 ng-include="topnavigation.html"和 ng-view="about.html"

我的 ng-view 根据路由指向不同的模板。例如:ng-view ="contact.html"

最佳答案

您可以通过维护页面上下文之类的内容轻松地做到这一点，其中包含其他模板的 URL(在您的例子中是页脚和页眉)。您需要做的就是将您的主页包装成这样:

<body ng-app="myApp" ng-controller="MainCtrl">

  <div ng-include="pageCtx.headerUrl"></div>  
  <div ng-view></div>
  <div ng-include="pageCtx.footerUrl"></div>

</body>

MainCtrl 在这里做的唯一一件事是在 $scope 上公开 pageCtx:

myApp.controller('MainCtrl', function($scope, myPageCtx) {
  $scope.pageCtx = myPageCtx;
});

myPageCtx 是一个完成所有“艰巨”工作的服务对象:

myApp.provider('myPageCtx', function() {

  var defaultCtx = {
    title: 'Default Title',
    headerUrl: 'default-header.tmpl.html',
    footerUrl: 'default-footer.tmpl.html'
  };

  var currentCtx = angular.copy(defaultCtx);

  return {
    $get: function($rootScope) { 

      // We probably want to revert back to the default whenever
      // the location is changed.

      $rootScope.$on('$locationChangeStart', function() {
        angular.extend(currentCtx, defaultCtx);
      }); 

      return currentCtx; 
    }
  };
});

现在，与您的嵌入式 ngView 模板之一关联的任何 Controller 都可以像 MainCtrl 一样请求此服务并修改任何上下文设置:

myApp.controller('MyViewCtrl', function($scope, myPageCtx) {
  myPageCtx.title = 'Title set from view 1';
  myPageCtx.footerUrl = 'view1-footer.tmpl.html';
});

您可以在 this plunker 中看到它的实际应用.

关于javascript - 在 angularjs 中有不同的页眉和页脚的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22248828/

24 4 0
文章推荐： android - 屏幕倒置
文章推荐： Android如何以编程方式设置windowanimation
文章推荐： android - 在 Android 中处理未知的 URI 方案(比特币示例)
文章推荐： 具有自定义属性的 Android selector.xml 抛出 XmlPullParserException
塔克拉玛干
个人简介

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

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