Я работаю с angular.js. У меня есть список элементов, и когда я нажимаю на один из них, он должен отображать определенный шаблон.
Все работает, если я использую приложение из корня (index.html), но после нажатия элемента, если я перезагружаю страницу (с измененным URL-адресом), контроллер не звонит, даже если я пытаюсь нажать на тот же снова.
Вот мой код:
config.js
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/building/:buildingName', {
templateUrl: 'views/building.html',
controller: 'buildingCtrl'
})
.otherwise({redirectTo: '/'});
}]);
townCtrl.js
app.controller('townCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
$scope.buildingsList = [{
name: 'Foo',
route: 'foo'
}, {
name: 'Bar',
route: 'bar'
}];
$scope.select = function (item) {
$scope.selected = item;
};
}
]);
buildingCtrl.js
app.controller('buildingCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
console.log($routeParams.buildingName);
}
]);
town.html
<div class="row" ng-controller="townCtrl">
<div class="col-md-3">
<div class="list-group">
<a ng-repeat="building in buildingsList"
ng-click="select(building)"
ng-class="{active: selected === building}"
class="list-group-item"
ng-href='#/building/{{building.route}}'>
{{building.name}}
</a>
</div>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
Итак, когда я нажимаю на элемент Foo, url стал ~/#/building/foo, buildingCtrl отображает "foo" в консоли, а building.html правильно отображается на странице.
Но если я перезагружу страницу вручную (то есть F5), URL-адрес останется прежним, build.html не будет отображаться, а хуже всего, если я нажму на "Foo", снова ничего не добавит...
Не могли бы вы помочь мне исправить это? Вероятно, я пропустил что-то на маршруте.
Похоже, вы дважды используете cityCtrl - один раз для town.html и один раз для building.html...
Возможно, вам нужно ввести другой контроллер для создания или просто использовать шаблон без него (если вам не нужен контроллер для шаблона здания).
Btw: есть атрибут ui-sref, чтобы упростить ссылку https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref