草庐IT

javascript - AngularJS - 处理重复的片段，如页眉和页脚

coder 2025-03-17 原文

我一直在尝试在 Angular JS 应用程序中实现页眉/页脚。我正在考虑将这些作为 ng-include 添加到主 index.html 中。但是，如果页眉和页脚是静态页面，这会起作用。我的情况略有不同......在登录页面中没有显示页眉/页脚。其他页面根据您是否登录，必须显示“欢迎用户[注销]”或“欢迎访客[登录]”。

我将登录信息保存在 rootScope 中，并在登录时设置一个 bool 值 $rootScope.isLoggedIn。最大的问题似乎是整个 ng-include 在注销时没有刷新。因此，带有 ng-show hide 指令的 div 不会在更改时隐藏/显示。有人建议使用 ng-switch - 它的行为方式也是一样的。

如果我将 header 代码移动到各个 View 中，那么一切都很好。

类似的问题在这里:Refresh header page in angularjs

最佳答案

按照 ivarni 的建议，在页眉/页脚中使用 Controller 。来 self 自己的(实验性)应用程序的示例:

在 index.html 中，header 会显示动态生成的菜单、登录/注销等:

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top"
    x-ng-controller="NavbarCtrl" x-ng-include="'app/main/navbar.html'"></div>

NavbarCtrl 为 app/main/navbar.html 模板构建适当的范围。模板如下(考虑到您的需求 - 并删除了不相关的细节):

<div class="navbar-inner" x-ng-if="showHeader">
    <div class="container">
        <div>
            <ul class="nav">
                <li x-ng-repeat="menuEntry in menuEntries">
                    <a x-ng-href="#{{menuEntry.path}}">{{menuEntry.display}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div x-ng-if="userData.loggedIn">
        Wellcome {{userData.userName}}!
        <a x-ng-click="logout()">Logout</a>
    </div>
    <div x-ng-if="!userData.loggedIn">
        <a x-ng-click="login()">Login</a>
    </div>
</div>

因此根据 showHeader 范围变量隐藏整个标记。它动态创建菜单 (menuEntries)。并根据 userData.loggedIn，相应的登录/注销消息。

关于javascript - AngularJS - 处理重复的片段，如页眉和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19286813/

页眉javascript34codeangularjs

有关javascript - AngularJS - 处理重复的片段，如页眉和页脚的更多相关文章

  1. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  2. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  4. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  5. ruby - 如何使用 Ruby HTTP::Net 处理 404 错误？ - 2

    我正在尝试解析网页，但有时会收到404错误。这是我用来获取网页的代码:result=Net::HTTP::getURI.parse(URI.escape(url))如何测试result是否为404错误代码？ 最佳答案 像这样重写你的代码:uri=URI.parse(url)result=Net::HTTP.start(uri.host,uri.port){|http|http.get(uri.path)}putsresult.codeputsresult.body这将打印状态码和正文。

  6. ruby - 正则表达式 - 保存重复捕获的组 - 2

    这就是我做的a="%span.rockets#diamonds.ribbons.forever"a=a.match(/(^\%\w+)([\.|\#]\w+)+/)putsa.inspect这是我得到的#这就是我想要的#帮助？我尝试过但失败了:( 最佳答案 通常，您不能获得任意数量的捕获组，但如果您使用扫描，您可以为您想要捕获的每个标记获得一个匹配:a="%span.rockets#diamonds.ribbons.forever"a=a.scan(/^%\w+|\G[.|#]\w+/)putsa.inspect["%span","

  7. ruby-on-rails - 使用 Ruby 正确处理 Stripe 错误和异常以实现一次性收费 - 2

    我查看了Stripedocumentationonerrors，但我仍然无法正确处理/重定向这些错误。基本上无论发生什么，我都希望他们返回到edit操作(通过edit_profile_path)并向他们显示一条消息(无论成功与否)。我在edit操作上有一个表单，它可以POST到update操作。使用有效的信用卡可以正常工作(费用在Stripe仪表板中)。我正在使用Stripe.js。classExtrasController5000,#amountincents:currency=>"usd",:card=>token,:description=>current_user.email)

  8. 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

  9. Ruby 从数组中删除重复的对象 - 2

    我无法使用传统的Ruby方法从下面的数组user_list中删除所有重复对象，从而获得预期的结果。有解决这个问题的聪明方法吗？users=[]user_list.eachdo|u|user=User.find_by_id(u.user_id)users 最佳答案 这个怎么样？users=User.find(user_list.map(&:user_id).uniq)这具有作为一个数据库调用而不是user_list.size数据库调用的额外好处。 关于Ruby从数组中删除重复的对象，我们在

  10. Ruby 删除可枚举列表中的重复项 - 2

    ruby中有没有一个很好的方法来删除可枚举列表中的重复项(即拒绝等) 最佳答案 对于数组你可以使用uniq()方法a=["a","a","b","b","c"]a.uniq#=>["a","b","c"]所以如果你只是(1..10).to_a.uniq或%w{antbatcatant}.to_a.uniq因为无论如何，几乎所有您实现的方法都将作为Array类返回。 关于Ruby删除可枚举列表中的重复项，我们在StackOverflow上找到一个类似的问题： h

随机推荐