Question

我是AngularJS的新手。我创建了一个基本网站，我添加了2个链接，我想创建相同的路由。以下是我的index.html文件：

<!DOCTYPE html>
<html ng-app="test">
<head>
    <title>My Angular App!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>   
</head>
<body>
<div id="links">
    <a ui-sref="login">Login</a>
   <a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>

但是当我运行我的代码时，上面的两个标签都不是链接。

Answer 1

问题在于您没有使用ui-router注册任何路由。注册路由时，ui-sref指令将添加href标记，并将应用默认的超链接样式。阅读有关超链接和锚标记here的更多信息。

示例：Live Demo

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

    $stateProvider
    .state('myState', {
      url: '/my/path',
      controller: 'MyStateController',
      templateUrl: 'my-state.html'
    });

  }
]);

HTML：

<a ui-sref="myState">My State</a>

ui-sref指令将呈现：

<a href="/my/path">My State</a> <!-- HTML5 Mode -->
<a href="#/my/path">My State</a> <!-- hashbang mode -->

AngularJS标签不作为链接出现

1 个答案:

示例：Live Demo