Question

所以我不知道出了什么问题，但我假设我在我的代码后台运行了一个循环，或者我的路由错误。但我所知道的是，当我尝试进入我的索引页面时，我的整个浏览器都被删除，没有任何错误或任何错误，只是崩溃。任何帮助都会非常感激我只是试图继续解决这个问题。如果这改变了我使用rails后端的任何东西。

planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'templates/home/nav.html',
    authenticate: true
  })
    .state('home.index', {       // our home page
      url: '/index',
      views: {
        "": {templateUrl: 'templates/home/home.html'},
        "assembly@index": { templateUrl: "templates/home/assembly.html" },
        "client@index": { templateUrl: "templates/home/client.html" },
        "photoplan@index": { templateUrl: "templates/home/home_photoplan.html" }
      },
      authenticate: true
    })

以下是导致问题的主要路线，主页只是一个导航栏，当你转到主页标签时，它应该带你到索引页面，但没有骰子。我不知道我的控制器应该显示多少，但这里有一小部分。它是直接影响路线的部分。

app.run(function ($rootScope,$location, $localStorage){
    $localStorage.recent = ""
      $rootScope.$on('$routeChangeSuccess', function() {
        console.log("working")
          recent.push($location.$$path);
      });
});


app.run(function ($rootScope, $state, AuthService) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
      if (toState.authenticate && !AuthService.isAuthenticated()){
        // User isn’t authenticated
        console.log(AuthService.isAuthenticated())
        $state.transitionTo("login");
        event.preventDefault();
      }
    });
  });




  // GET request Area
  $http.get('client.JSON').success(function(data){
    $scope.clients = data;
  });
  $http.get('photoplan.JSON').success(function(data){
    $scope.photoplans = data;
    $scope.complete = true;
    // if(main.photoplans.plano_order_status === "Complete"){
    //   console.log()
    //   $scope.complete = true;
    // }else{
    //   $scope.complete = false;
    // }

  });
    $http.get('assembly.JSON').success(function(data){
      // main.assemblys = $filter('filter')(data, function(d){return d.employee_id == mainid});
      $scope.assemblys = data;
      console.log($scope.assemblys)
    });
    $http.get('employee.JSON').success(function(data){
      $scope.employees = data;
    });
}]);

这是索引页面，它有一个嵌套视图，所有视图看起来大致相同。

<div class="container" ng-controller="MainCtrl">

<!-- Main Section -->
    <div class="home no-subheader container">
      <div class="row" >

        <!-- left -->
        <section name="assembly-queue"  class="molding col-md-4" id="assembly">
          <div class="gutter"  >
            <div ui-view="assembly"> </div>
            </div>
          </section>

        <!-- <section name="employee-queue" ng-if="type === 'admin'" class="molding col-md-4" id="employee">
          <div class="gutter"  id="scrollArea">
            <div ui-view=".employee"></div>
          </div>
      </section> -->

        <!-- middle -->
        <section name="clients" class="molding col-md-4" id="clients">
          <div class="gutter"  >

        <div ui-view="client"> </div>

      </div>
      </section>

        <!-- right -->
        <section name="photoplans" class="molding col-md-4" id="photoplans">
          <div class="gutter"   >
        <div ui-view="photoplan"> </div>
      </div>
    </section>

      </div>
    </div>
    </div>

这是装配页面。

<div id="expanding" >
<div class="top row">
      <h2> Assembly Queue</h2>
      <form class="navbar-form navbar-left default" role="search">
        <div class="form-group">
          <input type="text" ng-model="searchassembly" class="form-control query" placeholder="Search Assembly Queue">
        </div>

      </form>
    </div>
    </div>
    <article class="assembly snippet row" ng-repeat="assembly in assemblys|filter:searchassembly" > 
    <div class="left col-xs-7" >
        <address>{{assembly.address_part1}},{{assembly.address_part2}}</address>
        <p class="timeline-data"> Due on {{assembly.date_due}}</p>
        <p class="timeline-data"> Job Type: {{assembly.job_type}}</p>
        <p class="timeline-data"> Delivery Type: {{assembly.delivery_type}}</p>
      </div>
      <div class="right col-xs-5 text-center">
        <div class="corner-ribbon" ng-click="open(assembly.id)" > </div>
        <button ng-if="assembly.new_order" class="btn btn-default" ui-sref="photoplans({ id : assembly.photoplan_id })" ><span class="fa fa-pencil-square-o" aria-hidden="true"></span></button>
        <button ng-if="assembly.new_order === false" class="btn btn-default" ui-sref="assign({address : assembly.address, realtor: assembly.realtor})" ><span class="fa fa-external-link" aria-hidden="true"></span></button>
      </div> 
  </article>

如果有人有类似的问题或者可以看到这里的危险信号，请告诉我，我真的被困在这个问题上。

Answer 1

好的，所以我实际上自己找到了答案，并且我将解决方案留给了未来可能遇到此问题的人。但基本上我需要在我的家乡路线中找到某种类型的话，所以不需要/，我需要/ home。因为浏览器试图加载这个＃//索引，这导致崩溃。当同时使用rails和angular时，请确保使用命名路由来防止出现此问题。还要确保嵌套视图看起来像这样，whatever @ parent.child。继承我的新代码。

planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'templates/home/nav.html',
    authenticate: true
  })
    .state('home.index', {       // our home page
      url: '/index',
      views: {
        "": {templateUrl: 'templates/home/home.html'},
        "assembly@home.index": { templateUrl: "templates/home/assembly.html" },
        "client@home.index": { templateUrl: "templates/home/client.html" },
        "photoplan@home.index": { templateUrl: "templates/home/home_photoplan.html" }
      },
      authenticate: true
    })

Angular ui-router崩溃的浏览器

1 个答案: