使用href

时间:2017-03-21 13:33:17

标签: javascript angularjs routing angular-ui-router

我已经创建了一个州并试图导航到其他页面。控制台中没有错误,但导航也无法正常工作。

的index.html

<body ng-app="app">
    <a href='#/first-msg'>link</a>
    <div ui-view></div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
    <script src="application.js"></script>
</body>

的application.js

var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {
    $stateProvider.state('firstMessage', {
        url: '/first-msg',
        templateUrl: 'home.html',
        controller: 'homeCtrl'
    });
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
}]);
app.controller("homeCtrl", ['$scope', function($scope) {
    $scope.message = "This is home";
}]);

当我点击链接时,网址就像

.../index.html#%2Ffirst-msg

1 个答案:

答案 0 :(得分:3)

使用ui-router,您不应使用href。请改用ui-sref

<a ui-sref="firstMessage">link</a>

注意我使用的是州名,而不是其网址。

JSFiddle demo