嵌套的UI路由器$位置绑定

问题描述：

当我使用UI路由器时，我有一些绑定的问题。我试图让应用程序模块化，并保持清洁和简单。我有以下app.js

// main routing - index.html 
var app = angular.module('mainApp', ['ui.router']); 
app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state('index', { 
      url: '/', 
      templateUrl: 'pages/main.html' 
     }) 
     .state('cars', { 
      url: '/cars', 
      templateUrl: 'pages/Cars_model/main.html' 
     }) 
     .state('cars.audi', { 
      url: '/audi', 
      templateUrl: 'pages/Cars_model/audi.html' 
     }) 
     .state('cars.ford', { 
      url: '/ford', 
      templateUrl: 'pages/Cars_model/ford.html' 
     }) 
}); 
app.controller('indexController', function($scope, $location) { 
    $scope.isIndexPage = function() { 
     return $location.path() === '/'; 
    } 
}); 
app.controller('carsCtrl', function($scope, $location) { 
    if($location.path() === '/cars/audi') 
    { 
     $scope.pageHeader = "AUDI"; 
     $scope.curentMenu = "Best Cars"; 
     $scope.title = "Audi Specs"; 
    } 
    if($location.path() === '/cars/ford') 
    { 
     $scope.pageHeader = "FORD"; 
     $scope.curentMenu = "Best Cars"; 
     $scope.title = "Ford Specs"; 
    } 
});

和文件，我想用结合

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

    <div class="page-header"> 
     <h1>{{pageHeader}}</h1> 
    </div> 

    <!-- The first row --> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sd-12">     
      <ol class="breadcrumb"> 
       <li><a href="#/">Home</a></li> 
       <li><a href="#/cars">{{curentMenu}}</a></li> 
       <li class="active">{{pageHeader}}</li> 
      </ol> 
     </div> 
    </div> 
</div>

的问题是，当我加载页面的装订工作只有一次，第二我有刷新页面。

我不知道如果我使用的corect逻辑

if($location.path() === '/cars/ford')

你的用户界面在哪里？ – Claies

在上面的页面（

）其中是carsController太 – calin24

等待，这个HTML是你的模板之一，并且你正在声明父类和模板中的'carsCtrl'？ – Claies

答

我想我找到了解决办法

使用菜单中

ui-sref-opts="{reload: true}"

解决问题

<a ui-sref="cars.audi" ui-sref-opts="{reload: true}">Audi</a>

Plunker

嵌套的UI路由器$位置绑定

相关推荐