使用 Angularjs $state.go 进行导航答案

【问题标题】：Navigation using Angularjs $state.go使用 Angularjs $state.go 进行导航
【发布时间】：2016-05-10 10:49:08
【问题描述】：

我正在尝试在我的单页应用程序中创建一个简单的导航区域。它由列表中的一堆链接组成。每个都调用 NavigationController 中的一个方法。反过来，该方法调用 $state.go 并传递一个状态字符串。我已经配置了一条“否则”路径，以防我的状态未解决。问题是我总是得到“否则”模板，而不是状态中指定的模板。我看到我的控制器方法正在被调用，所以状态转换在某种程度上起作用。但我不明白为什么我最终会使用默认模板。

这是我的代码（下面是小提琴的链接）：

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>

我创建了一个小提琴here。

我对 angularjs 有点熟悉，但这个问题让我很困惑。据我了解 $state.go 调用应该触发状态转换，这意味着应用新状态的模板。出于某种原因，这个看似简单的场景在这里行不通。我在 SO 中尝试了其他答案，但没有任何帮助。我怀疑我忽略了一些干扰这种行为的东西。

【问题讨论】：

既然您使用的是 UI Router，那么您有什么理由使用 ng-click 而不是 ui-sref？
@JAAulde 没有什么特别的原因，只是直到昨天，我才知道 ui-sref。我想在这里使用它会更好。

标签： javascript angularjs routing angular-ui-router angularjs-routing

【解决方案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

【讨论】：

谢谢@Pankaj，这是我一天中最后 3 个小时的工作！ :)