使用href属性时,ui-route无法正常工作

时间:2016-06-26 22:11:43

标签: javascript angularjs angular-ui-router

我尝试使用ui-route来控制我的app状态,但我希望状态是面向URL的。

我想点击一个链接,然后自动转到带有相关网址的状态。

我遵循了深入的指南,我的代码看起来像这样(请参阅plnkr https://plnkr.co/edit/wk1RphKq6G3t4GqfppYm):

JS:

angularModule.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        //$urlRouterProvider.otherwise("/management");

        $stateProvider
          .state('management', {
            url: '/',
            template: '<p>:)</p>'
          })
          .state('management.users', {
            url: '/users',
            templateUrl: './users.html'
          });
      }]);

HTML:

 <div class="container-fluid" ng-controller="PageController">
            <aside class="sidebar col-md-3">
                <nav>
                    <ul>
                        <li><a href="index.html">Management</a></li>
                        <li><a href="management/users">Users</a></li>
                    </ul>
                </nav>
            </aside>
            <section class="content col-md-9" ui-view>
            </section>
        </div>

我错过了什么?

2 个答案:

答案 0 :(得分:1)

ui-router拥有自己的html属性,因此不是

ui-sref="management.users"

你应该使用

qs = User.objects.annotate(vote_count=Count('vote')).order_by('-vote_count')

与ui-sref一起使用的路径名是状态名,而不是url路径本身。

看看这个https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

希望这会有所帮助

答案 1 :(得分:0)

定义状态时,将根状态URL设置为“/”:

$stateProvider
  .state('management', {
    url: '/',       // INSTEAD OF "index.html"
    template: '<p>:)</p>'
  })
  .state('management.users', {
    url: '/users',
    templateUrl: 'users.html'
  });

下一步。您正试图将'dev.api'注入根模块:

angularModule = angular.module('app', [
  'ui.router',
  'ui.bootstrap',
  'dev.api' // HERE
]);

但是你永远不会创建模块。您需要将service.js更改为此:

angular
    .module('dev.api', []); // THIS IS HOW YOU DEFINE A NEW MODULE (Without external dependencies)
angular
    .module('dev.api').service('usersApiService', ['$http', function ($http) { .....

现在您将看到ui-sref正在运行(https://plnkr.co/edit/XbDx2EonQvZYXsyvWhUW?p=preview)。请注意,您仍然有一些JS错误,但这些错误与应用程序的逻辑有关,与问题无关。