使用 Angularjs $state.go 导航

Question

我正在尝试在我的单页应用程序中创建一个简单的导航区域。它由列表中的一堆 link 组成。每个调用 NavigationController 中的一个方法。该方法依次调用 $state.go 并将状态字符串传递给它。我已经配置了一个 "otherwise" 路径，以防我的状态没有得到解决。问题是我总是得到 "otherwise" 模板而不是状态中指定的模板。我看到正在调用我的控制器方法，因此状态转换在一定程度上起作用。但我不明白为什么我最终会使用默认模板。

这是我的代码（下面是 link 到 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 调用应该触发状态转换，这意味着应用新状态的模板。出于某种原因，这个看似简单的场景在这里不起作用。我在 SO 中尝试了其他答案，但没有任何帮助。我怀疑我忽略了一些干扰这种行为的东西。

Answer 1

请从 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>

Forked Fiddle

使用 Angularjs $state.go 导航

Navigation using Angularjs $state.go

javascript

angularjs

routing

angular-ui-router

angularjs-routing