我正在尝试在我的单页应用程序中创建一个简单的导航区域。它由列表中的一堆链接组成。每个都调用 NavigationController 中的一个方法。该方法依次调用 $state.go 并传递一个状态字符串。我已经配置了“其他”路径，以防我的状态未解决。问题是我总是得到“其他”模板，而不是状态中指定的模板。我看到我的 Controller 方法正在被调用，因此状态转换在某种程度上起作用。但我不明白为什么我最终会使用默认模板。
这是我的代码(下面是 fiddle 的链接):
var app = angular
.module("AppName", ['ui.router']);
angular
.module("AppName")
.config(['$locationProvider',
function ($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
angular.module("core", []);
angular
.module("AppName")
.requires
.push("core");
angular
.module("AppName")
.controller('NavBarController', ['$scope', '$state',
function ($scope, $state) {
$scope.username = null;
$scope.showNavBar = true;
$scope.navCollapsed = true;
$scope.goToProfile = function () {
console.log("goToProfile.");
$state.go('profile')
}
$scope.goToHistory = function () {
console.log("goToHistory");
$state.go('history')
}
}]);
angular
.module('core')
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(function ($injector, $location) {
console.log("Could not find: " + $location.$$path);
$location.path('/home');
});
$stateProvider
.state('home', {
url: '/home',
template: '<div> {{welcome}} </div>',
controller: 'HomeController'
});
$stateProvider
.state('profile', {
url: '/profile',
template: '<div>This is {{username}}\'s profile! </div>',
controller: 'ProfileController'
});
$stateProvider
.state('history', {
url: '/history',
template: '<div>{{history}}</div>',
controller: 'HistoryController'
});
}])
angular
.module('core')
.controller('HomeController', ['$scope',
function ($scope) {
$scope.welcome = "Welcome Home!";
}]);
angular
.module('core')
.controller('ProfileController', ['$scope',
function ($scope) {
console.log("Running ProfileController.")
$scope.username = "Bunny the rabbit";
}]);
angular
.module('core')
.controller('HistoryController', ['$scope',
function ($scope) {
console.log("Running HistoryController.")
$scope.history = ["item1", "item2", "item3"];
}]);
angular
.element(document)
.ready(function () {
if (window.location.hash === '#_=_') {
window.location.hash = '#!';
}
angular.bootstrap(document, ["AppName"]);
});
还有我的 html:
<body>
<div ng-controller="NavBarController">
<ul>
<li><a href="#" ng-click="goToProfile()">Profile</a></li>
<li><a href="#" ng-click="goToHistory()">History</a></li>
</ul>
</div>
<div class="app">
<div class='app-body'>
<div class='app-content'>
<ui-view class="ng-scope">
<div>
Some place holder html
</div>
</ui-view>
</div>
</div>
</div>
</body>
我创建了一个 fiddle here .
我对 AngularJS 有一定的了解，但这个问题困扰了我。据我了解 $state.go 调用应该触发状态转换，这意味着应用新状态的模板。由于某种原因，这个看似简单的场景在这里不起作用。我尝试了其他答案，但没有任何帮助。我怀疑我忽略了一些干扰此行为的因素。
最佳答案
请从 anchor 标记的 href 中删除 #。当您使用 # 进行 href 时，它们会被重定向到 $urlRouterProvider.otherwise，其中没有状态 URL 匹配。
标记
<ul>
<li><a href="" ng-click="goToProfile()">Profile</a></li>
<li><a href="" ng-click="goToHistory()">History</a></li>
</ul>
关于javascript - 使用 Angularjs $state.go 进行导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37136326/