个人中心
gpt4 book ai didi

javascript - 使用 Rails 两次 Angular 加载页眉和页脚

转载 作者：数据小太阳 更新时间：2023-10-29 08:02:59 26 4
gpt4 key购买 nike

我正在使用为前端 View 提供服务的 Angular 构建一个 Rails 应用程序。目前我遇到一个问题，Angular 会将页眉和页脚都加载到嵌套的 Angular View 中。

例如，我有一个列出最新报价请求的页面。在这个 View 中，我有一个页眉，下面是另一个页眉(这是不需要的)，然后是引号列表，然后是一个页脚，后面是另一个页脚(这也是不需要的)。

我不太确定当我以用户身份登录后会发生什么，也许有人可以提供帮助。

Application.Html

 <!DOCTYPE html>
<html>
<head>
  <title>StrangeCessation</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application'%>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, intial-scale=1, maximum-scale=1">
</head>
<body ng-app="StrangeCessation">
    <div class="section1">
        <div class="heading">
            <%= image_tag "HEADER.jpg", class: "himg" %>
        </div>
    </div>
    <div class="container-fluid" ui-view="main">
        <%= yield %>
        <hr>
    </div>

    <div class="footer ">
        <% if !logged_in? %>
            <script>
                $(document).ready(function () {
                    document.getElementById("lgfields").style.visibility = "hidden";
                });
                function switchFields() {
                    if(document.getElementById("lgfields").style.visibility == "hidden") {
                        document.getElementById("lgfields").style.visibility = "visible"
                    } else {
                        document.getElementById("lgfields").style.visibility = "hidden"
                    }; 
                }
            </script>
            <div>
                <span class="col-xs-offset-5 col-sm-offset-10">Strange Cessation</span>
                    <span class="loginI">
                        <a onclick="switchFields()"><%= image_tag "login.png", class: "loginIcon loginImage" %></a>
                    </span>
                <div id="login" class="col-sm-offset-10">
                    <div id="lgfields">
                        <%= render partial: "sessions/new" %>
                    </div>
                </div>
            </div>
        <% else %>
            <span>Strange Cessation</span>
                <div class="navigation">
                    <a ui-sref="home">Home</a>
                    <a ui-sref="quotes">Quotes</a>
                    <a ui-sref="users">Users</a>
                    <%= link_to "Log out", logout_path, method: "delete" %>
                </div>
        <% end %>
    </div>
</body>
</html>

Quotes.html

<% if logged_in? %>
<div class="quotespage" >
  <div class="userleftpanel col-xs-2 col-sm-3 col-sm-offset-1">
    <div class="row">
      <h1> Welcome <%= current_user.username %> </h1>
    </div>
    <div class="row">
      <%= image_tag current_user.avatar %>
    </div>
    <div class="row">
      <script>
        $(document).ready(function() {
          document.getElementById('settings').style.visibility = 'hidden';
          document.getElementById('fullquote').style.visibility = 'hidden';
        });

        function switchSettings() {
          if(document.getElementById('settings').style.visibility == 'hidden') {
            document.getElementById('settings').style.visibility = "visible"
          } else {
            document.getElementById('settings').style.visibility = 'hidden'
          };
        }
      </script>
      <a onclick="switchSettings()"> Settings </a>
        <div id="settings">
          <%= render :partial => "users/form", :locals => { :user => @user } %>
        </div>
    </div>

  </div>

  <div class="quoteicons col-xs-8">
    <div class="openquotes col-xs-2">
     <h2><%= @quotes.count %> Open Jobs</h2>
    </div>
    <div class="newquotes col-xs-2 col-xs-offset-1">
      <h2>
      <% @myarray = [] %>
      <% @quotes.each do |quote| %> 
        <% if quote.unread?(current_user) == true %>
          <% @myarray.push(quote) %>
        <% end %>
      <% end %>    
      <%= @myarray.count %> New Request
      </h2>
    </div>
    <div class="deletedquotes col-xs-2 col-offset-1">
      <h2> Deleted Quotes </h2>
    </div>
  </div>




      <div id='quotes' class="quotes col-xs-5 col-md-5" >
      <div id="full" ui-view="fullquote"></div>
        <div ng-repeat="quote in quotes" class="request">
            <a ng-click="showQuote(quote);">
              <span ng-if="quote.read == false"> *NEW*</span>
              <span class="col-xs-12">Request #{{quote.id}}</span><br>
              <span class="col-xs-1">{{quote.name}}</span>
              <span class="col-xs-1">{{quote.email}}</span>
              <span class="col-xs-4 col-xs-offset-4">{{quote.city}}, {{quote.state}}, {{quote.region}} </span>
            </a>
            <div ng-show="quote.visible">
              <div><a ui-sref="quotes.detail({id: quote.id})" ng-click="showfullquote()" ng-init="fullquote = false">View</a>
              <a ng-click="deleteQuote(quote)" style="float:left;"> Delete </a>
              <div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<% end %>

Quotes.js

var app = angular.module("StrangeCessation", ['ui.router', 'ngResource']);

app.factory('Quotes', ['$resource',function($resource){
 return $resource('/quotes.json', {},{
 query: { method: 'GET', isArray: true },
 create: { method: 'POST' }
 })
}]);

app.factory('Quote', ['$resource', function($resource){
 return $resource('/quotes/:id.json', {}, {
 show: { method: 'GET' },
 update: { method: 'PUT', params: {id: '@id'} },
 delete: { method: 'DELETE', params: {id: '@id'} }
 });
}]);

app.factory('Users', ['$resource',function($resource){
 return $resource('/users.json', {},{
 query: { method: 'GET', isArray: true },
 create: { method: 'POST' }
 })
}]);

app.factory('User', ['$resource', function($resource){
 return $resource('/users/:id.json', {}, {
 show: { method: 'GET' },
 update: { method: 'PUT', params: {id: '@id'} },
 delete: { method: 'DELETE', params: {id: '@id'} }
 });
}]);

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
    .state('home', { url: '/home',  views: { 'main': { templateUrl: 'static_pages/home.html'}}})
    .state('quotes', { url: '/quotes',  views: {'main': { templateUrl: 'quotes.html', controller: 'QuotesCtrl'}}})
    .state('quotes.detail',  { url: '/:id', views: {'fullquote': { templateUrl: function($stateParams) {return `quotes/${$stateParams.id}`;}, controller: 'QuotesController'}}})
    .state('quotes.detail.pdf', { url: '.pdf', views: { 'quotepdf': { controller: 'QuotesCtrl'}}})
    .state('users', { url: '/users', templateUrl: 'users.html', controller: 'UsersCtrl'})
    .state('/users/:id', { url: 'users_show.html', controller: 'UsersCtrl' });

    // $urlRouterProvider.otherwise( function($injector, $location) {
    //     var $state = $injector.get("$state");
    //         $state.go("home");
    // })

    $locationProvider.html5Mode({ enabled: true, requireBase: false });

});

app.controller("QuotesCtrl", ['$scope', '$state', '$stateParams', 'Quotes', 'Quote', '$location',  function($scope, $stateParams, $state, Quotes, Quote, $location ) {
    $scope.quotes = Quotes.query();
    $scope.quote = Quote.query();
    $scope.$stateParams = $stateParams;
    $scope.$state = $state;
    var quotes = $scope.quotes;
    var quote = $scope.quote;


    $scope.logState = function() {
        console.log($state);
    }

    var logState = $scope.logState ;
    var fullquote = true;
    $scope.fullquote = fullquote;

    $scope.showQuote = function (quote) {
        quote.visible = !quote.visible;
        logState();
    }

    $scope.deleteQuote = function (quote) {
        Quote.delete({id: quote.id})
        console.log("deleted" + quote.id);
    }

    if($state == 'quotes.detail.pdf') {
        console.log('Fire Modal');
        $scope.firePdfModal = function() {
            console.log('Fire Modal');
        }
    }

    $scope.showfullquote = function () {
        fullquote = false;
        console.log(fullquote);
    }

}]);

app.controller("QuotesController", ['Quote', '$scope', '$stateParams', QuotesController]);
function QuotesController( $scope, $stateParams, Quote ) {
    $scope.currentQuoteId = $stateParams.quote.id;
};

app.controller("UsersCtrl", ['$scope', '$http', 'Users', 'User', '$location',  function($scope, $http, Users, User, $location ) {
        $scope.users = Users.query();
    }
]);

DoubleHeaderError

最佳答案

我会尝试移动 ng-app="StrangeCessation"到 <div class="header> 之后的 div并把 <div class="footer"> after ng-app 的结束标记也是如此。

这里Angular的主要用途是什么？如果你以重复的页眉/页脚结束，这意味着 Angular 正在渲染也包含这些元素的嵌套 View 。在没有看到所有 View 、部分、 Controller 等的情况下，我们只能推测。您可以尝试从 application.html.erb 中删除页眉/页脚并查看页眉/页脚是否仍在登录时呈现。还要检查 static_pages/home.html 中可能有什么

看起来可能是这一行的问题，但不确定。这里的 View 目标似乎是“主要”。对吗？

.state('quotes', { url: '/quotes',  views: {'main': { templateUrl: 'quotes.html', controller: 'QuotesCtrl'}}})

另外，不确定你为什么传入 $urlRouterProvider但是随后您将该函数定义注释掉了。也没有看到部分，很难知道他们是否在做一些时髦的事情。也许您可以在某处发布指向完整代码的链接？

此外，题外话，但不确定为什么要使用 document.getElementById('settings').style.visibility = 'hidden'; 之类的东西

如果你正在使用 jquery，你可以这样做:$('#settings').hide();

关于javascript - 使用 Rails 两次 Angular 加载页眉和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37869150/

26 4 0
文章推荐： ruby-on-rails - 我应该制作一个单独的应用程序来向 RoR 应用程序中的 40-50k 用户发送推送通知还是使用后台作业
文章推荐： ruby-on-rails - CSR 失败 : Error Parsing Request ASN1 bad tag value met (ASN: 267 CRYPT_E_ASN1_BADTAG)
文章推荐： ruby-on-rails - 你的 Ruby 版本是 2.3.0，但是你的 Gemfile 指定了 2.1.2
文章推荐： ruby - 如何在 ruby​​ 中使用 ssh 隧道连接 postgres 数据库
数据小太阳
个人简介

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

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