角度加载页眉和页脚两次使用Rails

时间：2016-06-16 20:52:27

标签： javascript angularjs ruby frontend

我正在使用Angular构建一个Rails应用程序，为FrontEnd Views提供服务。目前我遇到一个问题，Angular会将Header和Footer加载到嵌套的Angular Views中。

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

我不确定一旦我以用户身份登录后会发生什么，也许有人会帮忙。

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

2 个答案:

答案 0 :(得分：1)

我会尝试将ng-app="StrangeCessation"移到<div class="header>之后的div，并将<div class="footer"> after ng-app的结束标记也放在其中。

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

中可能包含的内容

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

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

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

另外，关于主题，但不确定为什么使用document.getElementById('settings').style.visibility = 'hidden';

之类的内容

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

答案 1 :(得分：1)

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

<!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>
相关问题
最新问题