为什么我的ui-sref无法点击？

时间：2015-06-26 03:54:58

标签： javascript angularjs

我是使用Angular JS的新手，我正在尝试使用ui.router为我的应用创建路由器。

这是我的index.html页面，我通过div注入其他视图。

var input = [{
  name: 'foo',
  url: '/somewhere1',
  templateUrl: 'foo.tpl.html',
  title: 'title A',
  subtitle: 'description A'
}, {
  name: 'foo.bar',
  url: '/somewhere2',
  templateUrl: 'anotherpage.tpl.html',
  title: 'title B',
  subtitle: 'description B'
}, {
  name: 'buzz.fizz',
  url: '/another/place',
  templateUrl: 'hello.tpl.html',
  title: 'title C',
  subtitle: 'description C'
}, {
  name: 'foo.hello.world',
  url: '/',
  templateUrl: 'world.tpl.html',
  title: 'title D',
  subtitle: 'description D'
}];

var names = _.object(_.pluck(input, 'name'));

var partial = _.flatten(
  input.map(o => {
    var newobj = _.omit(o, 'title,subtitle'.split(','));
    newobj.data = _.pick(o, 'title,subtitle'.split(','));
    return newobj;
  })
  .map(o => {
    var parents = o.name.split('.').slice(0, -1);
    var missing =
      parents.map((val, idx) => parents.slice(0, idx + 1).join('.'))
      .filter(name => !(name in names))
      .map(name => {
        return {
          name,
          data: {},
        }
      });

    return missing.concat(o);
  }));
partial = _.sortBy(partial, o => o.name.split('.').length);

var name2path = {
  'empty': ''
};
var out = {};

partial.forEach(obj => {
  var split = obj.name.split('.');
  var par = name2path[split.slice(0, -1).join('.') || "empty"];
  var path = par + 'children.' + (_.get(out, par + 'children') || []).length;
  name2path[obj.name] = path + '.';
  _.set(out, path, obj);
});
out = out.children;

这是我的index.js文件，我在这里包含了所有路由器：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>omg</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
    <link rel="icon" type="" href=""/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script type="text/javascript" src="javascripts/index.js"></script>
    <script type="text/javascript" src="javascripts/login.js"></script>
    <script type="text/javascript" src="javascripts/signup.js"></script>
</head>
<body ng-app="secret">
    <div id="mainBar">
        <div id="mainBarWrapper">
            <div id="siteLogo">
                <img src="images/mimiLogo.png" alt="mimi"/>
            </div>
            <div>
                <ul id="navBar">
                    <li><a ui-sref="login">Login</a></li>
                    <li>Sort
                        <ul class="subMenu">
                            <li>thing1</li>
                            <li>thing2</li>
                            <li>thing3</li>
                        </ul>
                    </li>
                    <li>Schools
                        <ul class="subMenu">
                            <li>thing1</li>
                            <li>thing2</li>
                            <li>thing3</li>
                            <li>thing4</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--Injected View in here-->
    <div ui-view> </div>
</body>

我的index.html和login.html包含一些简单的html内容。 enter image description here 我只是想让路由器工作，但由于某些原因使用sref标签让我链接无法点击。如果我使用href标签代替并执行href =＆＃34;＃/ login＆＃34;，即使我已经实现了.otherwise方法，它也会给我一个404未找到的错误。有人能说什么错了吗？

1 个答案:

答案 0 :(得分：2)

一方面，您应该将主视图与索引分开。

另一方面，您的代码无效，因为这部分代码是错误的：

app.config('$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

//redirect if the router is unspecified
$urlRouterProvider.otherwise('/home');

$stateProvider
//home router where all the posts are displayed
.state('home', {
    url: '/',
    templateUrl: 'index.html',
    controller: 'mainController'
})

//the login router
.state('login',{
    url:'/login',
    templateUrl: 'login.html',
    controller: 'loginController'
});

});

你忘了[]了。

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    //redirect if the router is unspecified
    $urlRouterProvider.otherwise('/home');

    $stateProvider
    //home router where all the posts are displayed
        .state('home', {
        url: '/',
        templateUrl: 'index.html',
        controller: 'mainController'
    })

    //the login router
    .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        controller: 'loginController'
    });

}]);

但是使用该代码，主菜单不会消失。

这是一个更好的方法片段：

var app = angular.module("secret", ["ui.router"]);

//TO DO: THIS NEEDS TO BE COMPLETED
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    //redirect if the router is unspecified
    $urlRouterProvider.otherwise('/init');

    $stateProvider
    //home router where all the posts are displayed
        .state('init', {
        url: '/init',
        templateUrl: 'init.html',
        controller: 'mainController'
    })

    //the login router
    .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        controller: 'loginController'
    });

}]);

//service to be used by other controllers
app.factory('posts', [function() {
    var o = {
        posts: []
    };

    return o;

}]);

//the controller for the login router
app.controller('loginController', ['$scope', function($scope) {

}]);

//the controller for the post controller
app.controller('postController', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {

}]);

//main controller
app.controller('mainController', ['$scope', 'posts', function($scope, posts) {

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<body ng-app="secret">

  <!--Injected View in here-->
  <div ui-view> </div>
  <script type="text/ng-template" id="init.html">
    <div id="mainBar">
      <div id="mainBarWrapper">
        <div>
          <ul id="navBar">
            <li><a ui-sref="login">Login</a></li>
            <li>Sort
              <ul class="subMenu">
                <li>thing1</li>
                <li>thing2</li>
                <li>thing3</li>
              </ul>
            </li>
            <li>Schools
              <ul class="subMenu">
                <li>thing1</li>
                <li>thing2</li>
                <li>thing3</li>
                <li>thing4</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="login.html">
    <h1>Login page</h1>
  </script>
</body>

PS：我建议你使用最新的AngularJS和UI-Router版本。

编辑1 ：

所有路径都相对于您加载它们的地方，在本例中为index.html。这就是你的基本路径。由于我在这里没有文件，我在代码段中所做的是在<script>标记之间添加模板。您可以在ui-view指令下方看到它们。这是2个模板。

你应该始终在模板文件中保持你的观点分开，这样一切都有秩序，并使错误修正和维护更容易。

通常在模板文件夹中：

|--index.html
|--templates/
    |--- init.html
    |--- login.html

然后，您将templateUrl更改为：templates/init.html和templates/login.html更改为其他州。

相关问题
最新问题