我正在使用ui路由器状态。我有两个不同的 Controller ,将来可能还会扩展。如何编写默认和通用页眉和页脚。

var myApp = angular.module('myApp', ['ui.router']);

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

myApp.config(function($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/first");

    // ui router states
    $stateProvider
        .state('first', {
            url: "/first",
            views: {
                header: {
                    template: '<h1>First header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>First footer</div>',
                    controller: function($scope) {}
                }
            }
        })
        .state('second', {
            url: "/second",
            views: {
                header: {
                    template: '<h1>Second header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>Second content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>Second footer</div>',
                    controller: function($scope) {}
                }
            }
        });

});

Jsfiddle:http://jsfiddle.net/karthikreddy/b7cnszdf/

最佳答案

请看这个演示:http://jsfiddle.net/tkf954a5/

您可以像这样定义页脚和页眉:

  var header = {
       template: '<h1>Im Header</h1>',
       controller: function($scope) {}

  }

然后在您的州使用它:
 .state('first', {
            url: "/first",
            views: {
                header: header,
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: footer
            }
        })

07-24 09:44
查看更多