Question

我正在练习角度ui路线，所以我写了这个简单的应用程序，但页面上的ui-sref链接无法点击！。

我知道这个问题已被问到here，但我的问题不同（我查看了我的链接）。

html page

<html>

<body ng-app="myApp">
<a ui-sref="home"> home </a>
<div class="container" style="margin-top: 53px">
    <ui-view ="home"> </ui-view>
</div>
</body>
</html>

脚本

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
    <script src=“http://unpkg.com/@uirouter/angularjs@latest/release/angular-ui-router.min.js”></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>
    myApp = angular.module("myApp",['ui.router'])
        .config(function ($stateProvider,$urlRouterProvider) {
            $stateProvider
            .state("home",
            {
                url:"/home",
                views:{
                    'home':{template:"home.html"}
                } 
            })

            .state('otherwise'),
            {
                template:"page not availabe "
            });
        });
</script>

css bootstrap

Answer 1

<script>
    myApp = angular.module("myApp",['ui.router'])
        .config(function ($stateProvider,$urlRouterProvider) {
            $stateProvider
            .state("home",
            {
                url:"/home",
                views:{
                    'home':{template:"home.html"}
                } 
            })

            .state('otherwise'),
            {
                template:"page not availabe "
            });
        });
</script>

尝试如上所述创建模块和配置。可能会有帮助！

Answer 2

ui-router指令的工作原理如下：

for views

<div ui-view="home"></div>

默认

<ui-view></ui-view>

您的代码很好，但首先检查您的脚本网址，确保它有效，在线测试。

您的ui路由器脚本已经像这样“http://unpkg.com/@uirouter/angularjs@latest/release/angular-ui-router.min.js”粘贴，从您的第一个和最后一个网址中删除“url”，并将其替换为"url"。

将angular.js和ui-rourer文件替换为此示例的脚本

var app = angular.module("app", ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state("home", {
    url: "/home",
    views: {
      'home': {
        template: "home.html"
      }
    }
  });

  $urlRouterProvider.otherwise("/home");

});

<script src="http://localhost:50299/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="http://localhost:50299/bower_components/angular/angular.min.js"></script>

<div ng-app="app">

  <a ui-sref="home"> home </a>
  <hr />
  <div>
    <div ui-view="home"></div>
  </div>

  <script type="text/ng-template" id="home.html">
    <h1>Home</h1>
  </script>

</div>

Angular ui ui-sref链接不可点击

2 个答案: