jjzjj

javascript - Angular ui.router 默认页眉页脚

coder 2024-07-29 原文

当谈到 ui.router 模块时，我可以想到三种不同的方法来为每个 View 设置默认页眉和页脚:

DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER

1。 ng-include - 将页眉/页脚附加到初始 .html 文件 (index.html)。

<html>
<div ng-include src="'header.html'"></div>
<div id="content" ui-view></div>

1.1。将代码粘贴到 index.html

<html>
<div><!-- my header code here --></div>
<div id="content" ui-view></div>

2。使用指令解析页眉和页脚。

主页.html

<!-- content -->
<!-- /content -->
<footer></footer>

footerDirective.js

module.directive('footer', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "footer.html",
        controller: ['$scope', '$filter', function ($scope, $filter) {
        }]
    } 
});

http://gon.to/2013/03/23/the-right-way-of-coding-angularjs-how-to-organize-a-regular-webapp/

3。在没有 url 的情况下在 ui.router 上创建一个额外的状态。

State wrapper 将包含页眉和页脚，并且不可调用。

$stateProvider
.state('wrapper', {
    templateUrl: 'wrapper.html', // contains html of header and footer
    controller: 'WrapperCtrl'
})
.state('wrapper.home', {
    url: '/',
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
});

哪一个是首选？或者，是否有更理想的方法来使用 Angular 1.x？

最佳答案

还有另一种方法可以利用状态的 views 属性。它使人们能够为特定状态定义多个命名 View 。 UI docs .

考虑以下示例，其中状态 myapp 具有三个命名 View ，其中内容 View 将是具有动态内容的 View 。

$stateProvider
    .state('myapp', {
        views: {
          'header': {
            template:'header <hr />',
            controller:'mainController as main'
          },
          'content': {
            template:'<div ui-view></div>'
          },
          'footer': {
            template:'<hr /> footer',
            controller:'mainController as main'
          }
       }
   })
  //States below will live in content view
  .state('myapp.one', {
    template:'View 1 <button ui-sref="myapp.two">next page</button>',
    controller:'firstController as first',
  })
  .state('myapp.two', {
    template:'Another page <button ui-sref="myapp.one"> Go back</button>',
    controller:'secondController as second',
  })

HTML 看起来像这样:

<div ui-view="header"></div>
<div ui-view="content"><!-- Where your content will live --></div>
<div ui-view="footer"></div>

Jsbin example

关于javascript - Angular ui.router 默认页眉页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34515006/

页眉javascript39codeltangularjsangularjs-directiveangular-ui-router

有关javascript - Angular ui.router 默认页眉页脚的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  3. ruby-on-rails - 在默认方法参数中使用 .reverse_merge 或 .merge - 2

    两者都可以defsetup(options={})options.reverse_merge:size=>25,:velocity=>10end和defsetup(options={}){:size=>25,:velocity=>10}.merge(options)end在方法的参数中分配默认值。问题是:哪个更好？您更愿意使用哪一个？在性能、代码可读性或其他方面有什么不同吗？编辑:我无意中添加了bang(!)...并不是要询问nobang方法与bang方法之间的区别 最佳答案 我倾向于使用reverse_merge方法:option

  4. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

  5. Ruby 默认将 IRB 配置为 Pretty_Inspect - 2

    我是ruby​​的新手，正在配置IRB。我喜欢pretty-print(需要'pp')，但总是输入pp来漂亮地打印它似乎很麻烦。我想做的是默认情况下让它漂亮地打印出来，所以如果我有一个var，比如说，'myvar'，然后键入myvar，它会自动调用pretty_inspect而不是常规检查。我从哪里开始？理想情况下，我将能够向我的.irbrc文件添加一个自动调用的方法。有什么想法吗？谢谢! 最佳答案 irb中默认pretty-print对象正是hirb被迫去做。Theseposts解释hirb如何将几乎所有内容转换为ascii表。虽

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - Chef LW 资源属性默认值如何引用另一个属性？ - 2

    我正在尝试将一个资源属性的默认值设置为另一个属性的值。我正在为我正在构建的tomcat说明书定义一个资源，其中包含以下定义。我想要可以独立设置的“名称”和“服务名称”属性。当未设置服务名称时，我希望它默认为为“名称”提供的任何内容。以下不符合我的预期:attribute:name,:kind_of=>String,:required=>true,:name_attribute=>trueattribute:service_name,:kind_of=>String,:default=>:name注意第二行末尾的“:default=>:name”。当我在Recipe的新block中引用我

  8. ruby-on-rails - 如何在回形针 ruby​​ on rails 中设置默认图像 - 2

    最近我安装了Paperclipgem，我正在努力让默认图像在我的系统上工作，我将图像文件放在assets/images/pic.png中。这是我的模型User中的代码:has_attached_file:pic,:styles=>{:medium=>"300x300>",:thumb=>"100x100>"},:default_url=>'missing_:avatar.png'#:default_url=>'assets/images/avatar.png'has_attached_file:attach这是我的AddPicPaperClip迁移中的代码:defself.upadd_

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息 - 2

    我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]

随机推荐