2014-02-07 2 views
1

SetupAngularJS - контроллер Обновления на маршрут Изменение

app.controller('headerController', ['$scope', '$routeParams', function($scope, $routeParams) { 
    $scope.data = $routeParams; 
}]); 

app.config(['$routeProvider', 
    function ($routeProvider) { 
     $routeProvider. 
      when('/:url', { 
       template: '<h2>Hello World</h2>' 
      }) 
}]); 

Layout

<body> 
    <div ng-controller="headerController"> 
     Current Url:{{data.url}} 
    </div> 

    <div ng-view></div> 

    <ul> 
     <li> 
      <a href="#/pageA">Page A</a> 
     </li> 
     <li> 
     <a href="#/pageB>Page B</a> 
    </li> 
</body> 

Проблема

Я хочу раздел заголовка, чтобы постоянно обновлять с текущим URL-адрес каждый раз маршрут изменяется. Когда я загружаю свое приложение в первый раз, это работает. Однако, если я изменю маршрут, контроллер не обновится до нового URL-адреса.

Мой вопрос заключается не в решении этой точной проблемы, потому что я знаю, что есть другие способы сделать это, а решить ее с помощью этой настройки. Другими словами, мне нужно знать, как предоставить контроллер за пределами моего текущего маршрута, и обновлять его каждый раз при изменении маршрута.

ответ

0

Вы должны попытаться сделать $ scope.data функцией, чтобы пересмотреть ее.

В противном случае я предлагаю вам прослушать onRouteChangeSuccess, чтобы посмотреть изменение URL.

0

Я пробовал ваш код и с некоторыми небольшими изменениями, такими как в следующем, он отлично работает на моей стороне с firefox. URL правильно обновляется на странице A или Page B при изменении

Возможно, я также не понял вопрос?

var app=angular.module('app',['ngRoute']); 

app.controller('headerController', ['$scope', '$routeParams', function($scope, $routeParams) { 
    $scope.data = $routeParams; 
}]); 

app.config(['$routeProvider', 
    function ($routeProvider) { 
     $routeProvider. 
     when('/:url', { 
      template: '<h2>Hello World</h2>' 
     }) 
}]); 



<html ng-app="app"> 
<head> 
    <script src="angular.min.js"></script> 
    <script src="angular-route.js"></script> 
    <script src="controller.js"></script> 
</head> 
<body> 
    <div ng-controller="headerController"> 
     Current Url:{{data.url}} 
    </div> 

    <div ng-view></div> 

    <ul> 
     <li> 
      <a href="#/pageA">Page A</a> 
     </li> 
     <li> 
      <a href="#/pageB">Page B</a> 
     </li> 
</body> 

Приветствия

Николя

Смежные вопросы