Javascript 在angularjs中使用不同页眉和页脚的最佳方式是什么？_Javascript_Angularjs_Angularjs Directive_Angularjs Routing

Javascript 在angularjs中使用不同页眉和页脚的最佳方式是什么？

javascript angularjs

Javascript 在angularjs中使用不同页眉和页脚的最佳方式是什么？,javascript,angularjs,angularjs-directive,angularjs-routing,Javascript,Angularjs,Angularjs Directive,Angularjs Routing,我正在使用angular js单页应用程序。我有共同的页眉和页脚，并且我的ng视图会根据路由进行更改。现在我需要有一个不同的页眉和页脚页面。如何修改当前页面以包含它我有一个带有ng include=“shell.html”的页面并且shell.html有ng include=“topnavigation.html”和ng view=“about.html” 我的ng视图根据路由指向不同的模板。例如：ng view=“contact.html”您可以通过维护类似于页面上下文的内容轻松做到这一

我正在使用angular js单页应用程序。我有共同的页眉和页脚，并且我的ng视图会根据路由进行更改。现在我需要有一个不同的页眉和页脚页面。如何修改当前页面以包含它

我有一个带有ng include=“shell.html”的页面并且shell.html有ng include=“topnavigation.html”和ng view=“about.html”

我的ng视图根据路由指向不同的模板。

例如：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>

myPageCtx

是一个服务对象，它完成所有“艰苦”工作：

现在，任何与嵌入式ngView模板关联的控制器都可以请求此服务，就像

MainCtrl

一样，并修改任何上下文设置：

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

您可以在中看到它的作用。

谢谢@null的回答。我开始使用angular UI router，它是这个场景的一个健壮而强大的解决方案。

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; 
    }
  };
});

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