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

Question

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

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

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

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

Answer 1

我会尝试将 ng-app="StrangeCessation" 移动到 <div class="header> 之后的 div 并放置 <div class="footer"> afterng-app 的结束标记。

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

中可能有什么

看起来可能是这一行的问题，但不确定。这里的查看目标好像是"main"。对吗？

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

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

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

当您使用 jquery 时，您可以这样做：$('#settings').hide();

Answer 2

我建议您尝试这两种解决方案，看看是否有效。没有看到更多您的代码可能是解决方案。

<!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>

<div class="section1">
    <div class="heading">
        <%= image_tag "HEADER.jpg", class: "himg" %>
    </div>
</div>

<body ng-app="StrangeCessation">    
    <div class="container-fluid" ui-view="main">
        <%= yield %>
        <hr>
    </div>
</body>

<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>
</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="container-fluid" ui-view="main">
        <%= yield %>
        <hr>
    </div>
</body>
</html>

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

Angular Loading Header and Footer twice with Rails

javascript

ruby

frontend

angularjs