Question

我使用ui-router时遇到绑定问题。我试图使应用程序模块化，并保持其清洁和简单。我有以下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>

问题是当我加载页面绑定工作只有一次，第二次我必须刷新页面。

我不确定我是否使用了核心逻辑

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

Answer 1

我想我找到了解决方案

使用

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

在菜单中解决问题

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

Plunker

嵌套的ui-router $位置绑定

1 个答案: