UI-路由器路由回到默認值
[英]UI-Router Routing Back to Default
問題描述
我正在開發一個需要能夠單擊更改視圖的應用程序。
我有一個可單擊的值表，該值可指向該對象的主頁。 我的路線有問題，因為無論我的路線回到默認（'/'），都是如此。
這是我的主要JavaScript文件。
angular.module('myApp',['ui.router', 'templates', 'angular-loading-bar'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// Default route
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
controller: 'MainCtrl',
templateUrl: 'home/_home.html',
resolve: {
product: ['products', function(products) {
return products.get();
}]
}
})
.state('schedules', {
url:'/schedules',
controller: 'SchedulesCtrl',
templateUrl:'schedules/_schedules.html',
resolve: {
schedules: ['schedules', function(schedules) {
return schedules.get();
}]
}
});
}]);
我嘗試了兩種方法來更改頁面，一種是導航欄上的常規鏈接<li><a href="#/schedules">Click Me</a></li> ，還可以通過添加一個ng-click函數$location.path('/schedules'); 在桌子上。 我可以看到鏈接快速更改，但是它重新路由到默認鏈接。
這是我的主要application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Features</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body ng-app="myApp">
<!-- Navbar -->
<div ng-include="'nav/_nav.html'"></div>
<div class="row" >
<div class="col-md-8 col-md-offset-2">
<div ui-view></div>
</div>
</div>
</body>
</html>
Navbar部分的HTML
<nav class="navbar navbar-default"role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">My App</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Main</a></li>
<li><a href="#/schedules">Schedule</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<label for="date">Label</label>
<input type="text" class="form-control" ng-model="datePicker" datepicker id="date"/>
</form>
</div>
</nav>
家庭部分
<div class="panel panel-default ">
<div class="panel-heading flex">
<span class="sg-box inline">
<h2>Home
<div class="flex inline flex-right pull-right">
<form class="form-inline">
<a ng-attr-class="btn btn-default btn-small {{allFilterOn && 'btn-secondary'}}" ng-click="turnOnAllFilter()">All</a>
<a ng-attr-class="btn btn-default btn-small {{missingFilterOn && 'btn-secondary'}}" ng-click="turnOnMissingFilter()">Missing</a>
<a ng-attr-class="btn btn-default btn-small {{readyFilterOn && 'btn-secondary'}}" ng-click="turnOnReadyFilter()">Ready</a>
<input type="text" class=" form-control input-md" placeholder="Filter" ng-model="name">
</form>
</div>
</h2>
</span>
</div>
<div class="panel-body">
<table class="table table-align-middle table-hover">
<thead>
<tr>
<th class="name">Name <a ng-click="sortFields('name')"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="delivery">Delivery</th>
<th class="features">Features</th>
<th class="warnings">Warnings</th>
</tr>
</thead>
<tbody>
<tr ng-click="go(p)"ng-repeat="p in filteredProducts = (product.products | filter: productName | productFilter:allFilterOn:missingFilterOn:readyFilterOn | orderBy:sortType:sortReverse)">
<td>{{p.name}}</td>
<td>Daily</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{p.listing_count}}" aria-valuemin="0" aria-valuemax="{{p.required_features}}" style="min-width: 2em; width: {{(100*p.listing_count/p.required_features)| number:0}}%;">
{{p.listing_count}}
</div>
</div>
</td>
<td>
<span class="glyphicon glyphicon-warning-sign"> 0 </span>
</td>
</tr>
</tbody>
</table>
</div
</div>
MainCtrl中的Go函數
$scope.go = function(product) {
console.log($location);
console.log(product.id);
$location.path('#/schedules');
}
1 個解決方案
解決方案1
0 2015-11-29 11:06:12
使用ui.router角度包時，應始終遵循提供的狀態更改功能。
因此，您可以使用替換href-tag的html標簽：
<a ui-sref="state.name.here">Link</a>
或者，您可以使用可在控制器中使用的功能：
function Controller($scope, $state) {
$scope.goSchedules = function() {
$state.go('state.name.here');
}
}
並在元素上的ng-click標記中使用該功能。
通過href-tag或location-service手動更改URL時，不僅會在更改狀態URL時遇到麻煩，而且還會在普通模式和HTML5模式之間切換時遇到麻煩（URL欄中沒有井號＃號） ）。 當兩個名稱沖突或您要針對SEO優化時，將來更改狀態的URL可能會成為問題。 關閉HTML5模式有時在開發過程中很有用，但在生產中看起來更好。
深度路由無法按預期的ui路由器運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.