Question

我有一个简单的应用程序，在后端使用Ruby on Rails，在前端使用AngularJS。在application.html.erb文件中，我放置了一个包含ng-include及其控制器的div元素，这会抓取包含固定顶部导航栏的nav.html文件;之后是屈服函数，如下：

<!DOCTYPE html>
<html>
<head>
  <title>RailsAngularAuthenticationProject</title>
  <base href="/">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="angular-auth-app">
  <div ng-include="'settingAngular/nav/nav.html'" ng-controller="NavCtrl"></div>
  <div class="" ng-controller="MainCtrl">
    <ui-view><%= yield %></ui-view>
  </div>

</body>
</html>

主页包括以下内容：

    <div class="panel panel-default">
  <div class="panel-heading">Sign in via email</div>
  <div class="panel-body">

    <label>user signed in?</label>
    <p>{{ user.signedIn ? "true" : "false" }}</p>
    <label>user email</label>
    <p>{{ user.email || "n/a" }}</p>

    <!-- sign out button -->
    <button class="btn btn-default" ng-click="signOut()" ng-if="user.signedIn">Sign out</button>

    <a ui-sref="posts.show">posts</a>

  </div>
</div>

当我点击主播标签“帖子”时，这将带我到另一个页面，localhost：3000 / posts。到目前为止一切都很好，但当我点击后退按钮返回主页时，修复顶部导航栏消失，锚标记变得无响应，占位符不再起作用。

我是AngularJS的新手，所以不知道发生了什么，我认为Angular app.js有问题，可能而不是rails。这是我的app.js

angular.module('angular-auth-app', [
  'ui.router',
  'ui.bootstrap',
  'ngRoute',
  'ngResource',
  'templates',
  'ng-token-auth',
  'ngAnimate',
  'ngCookies',])
  .constant('baseUrl', 'http://localhost:3000')
  .config([
  'baseUrl',
  '$stateProvider',
  '$routeProvider',
  '$authProvider',
  '$locationProvider',
  '$urlRouterProvider',
  function(baseUrl, $stateProvider, $routeProvider, $authProvider, $locationProvider, $urlRouterProvider){
        $locationProvider.html5Mode(true); //this removes the # on the url, add the base to application

         $authProvider.configure({
           apiUrl: baseUrl + '/api',

          handleLoginResponse: function(response) {
            return response;
          },

          // handleAccountUpdateResponse: function(response) {
          //   return response;
          // },

          handleTokenValidationResponse: function(response) {
            return response;
          }
         });


        $stateProvider
        .state('home', {
          url: '/',
          controller: 'MainCtrl',
        })
        .state('posts',{
          templateUrl: 'settingAngular/posts/postLayout.html',
        })
        .state('posts.show',{
          url: '/posts',
          views: {
            postView: {
              templateUrl: 'settingAngular/posts/post.html',
              controller: 'PostCtrl'
            }
          }
        });

        $urlRouterProvider.otherwise('/');

       }]);

尝试学习如何使用rails和AngularJs构建应用程序。在此先感谢，非常感谢您的帮助！

Answer 1

好的，如果我为$urlRouterProvider和$stateProvider设置以下代码，我找到了一种解决此问题的方法：

$urlRouterProvider.otherwise('/home');

        $stateProvider
        .state('home', {
          url: '/home',
          controller: 'MainCtrl',
        })

我不再失去包括导航栏，控制器和占位符的ng;但是我的网址将从现在开始在localhost：3000 / home。

我仍然想在没有/ home的情况下设置主页。如果删除＆＃39; home＆＃39;，然后在urlrouter提供者和状态，那么我将回到相同的问题。

<强>解决方案：

发现问题，Angular很好，这是铁路turbolinks干扰w / Agular ui路由器。因此，从javascript文件夹中的应用程序js中删除此行//require turbolinks，它就像魅力一样。

此外，我想指出当我将/home添加到网址时 - 请参阅上面的代码 - 之前我又回到了相同的问题。

按下浏览器上的后退按钮后，包含ng-include和ng-controller的div元素消失

1 个答案: