angular $stateProvider not routing as expected

问题

In my main index.html file I have the following simple markup...

<body ng-app="starter" ng-controller="AppCtrl">
    <div ui-view></div>
</body>

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'
    })
});

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.

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();
  }   
});

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.

回答1:

app.accounts is a child state of app. That means in menu.html there must be <ui-view> in order to display accounts.html.

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>

and

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'
    })
});

来源：https://stackoverflow.com/questions/39813103/angular-stateprovider-not-routing-as-expected

标签

javascript

angularjs

ionic-framework