Question

我正在尝试在单页面应用程序中创建一个简单的导航区域。它由列表中的一堆链接组成。每个人都在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中尝试了其他答案，但没有任何帮助。我怀疑我忽略了一些干扰这种行为的事情。

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进行导航

1 个答案: