angular $ stateProvider未按预期路由 [英] angular $stateProvider not routing as expected
问题描述
在我的主 index.html 文件中，我有以下简单标记...
In my main index.html file I have the following simple markup...
<body ng-app="starter" ng-controller="AppCtrl">
<div ui-view></div>
</body>
在我的 app.js 我正在使用 $ stateProvider 创建路线以便我可以显示某些页面......
In my app.js I am using $stateProvider to create routes so I can display certain pages...
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.accounts', {
url: '/accounts',
templateUrl: 'templates/accounts.html'
})
});
当页面加载时，第一个状态被加载，这意味着我可以看到<$ c的内容我的主 index.html 中的$ c> menu.html 和控制器 AppCtrl 是传递到这个州。
When the page loads, the first state is loaded, meaning I can see the contents of menu.html in my main index.html and the controller AppCtrl is passed to this state.
我的 AppCtrl 加载我正在使用的API，点击菜单中的按钮.html ，API为用户提供登录的UI，一旦凭据良好，就会调用 success ......
My AppCtrl loads an API that I am using on click of a button from menu.html, the API provides a UI for a user to login, and once the credentials are good, the success is called...
app.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {
$scope.create = function() {
var linkHandler = Plaid.create({
env: 'tartan',
clientName: 'Example Project',
key: 'test_key',
product: 'connect',
onSuccess: function(token) {
$state.go('app.accounts');
},
});
linkHandler.open();
}
});
API的作用非常无关紧要，但正如你所看到的，我正在传递 $ state.go（'app.accounts'）; 成功。但是我没有将状态更改为 app.accounts ，而是调用了否则语句，因为我看到的只是 app 州的内容。
What the API does is pretty irrelevant, but as you can see, I am passing $state.go('app.accounts'); on success. But instead of changing the state to app.accounts, I believe the otherwise statement is called because all I see is the contents of the app state.
为什么会这样？我已经在这个问题上坚持了一段时间。
Why is this so? I've been stuck on this issue for some time now.
推荐答案
app.accounts 是 app 的子状态。这意味着在 menu.html 中必须有< ui-view> 才能显示 accounts.html 。
app.accounts is a child state of app. That means in menu.html there must be <ui-view> in order to display accounts.html.
如果您不想显示 accounts.html 在 menu.html 内，你不应该使帐户子状态 app ：
If you don't want to display accounts.html inside menu.html, you shouldn't make accounts a child state of app:
<body ng-app="starter">
<div ui-view></div>
</body>
和
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('accounts', {
url: '/accounts',
templateUrl: 'templates/accounts.html'
})
});
这篇关于angular $ stateProvider未按预期路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
