1
私のアプリでは、ui-routerを使用して状態を切り替えます。状態を切り替えるとエラーは表示されませんが、ui-viewは更新されません。ここに私のindex.htmlAngularJS：ui-routerの抽象状態からリダイレクトできません
<!DOCTYPE html>
<html>
<head>
<!-- css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/cerulean/bootstrap.min.css", rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<!-- libraries concatenated -->
<script type="text/javascript" src="libs.js"></script>
<!-- app concatenated -->
<script type="text/javascript" src="app.js"></script>
<!-- html templates -->
<script type="text/javascript" src="templates-app.js"></script>
<!-- meta -->
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-controller="BodyController">
<div class="container">
<div class="navbar navbar-default" role="navigation" ng-show="!ls.isLogged">
<div class="navbar-collapse">
<!-- Navbar links -->
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.is('app.lide') }">
<a ui-sref="app.lide">Lidé</a>
</li>
<li ng-class="{ active: $state.is('app.skoleni') }">
<a ui-sref="app.skoleni">Školení</a>
</li>
</ul>
</div>
</div>
<!-- content will be loaded here - display 'loading...' while reading the content -->
<div ui-view></div>
</div>
</body>
</html>
そして、ここでのスケルトンをapp.jsファイルされる：不明な理由から
angular.element(document.body).ready(function() {
angular.bootstrap(document.body, ['ldc-app']);
});
angular.module('ldc-app', [
// services
// constants
// components
'ui.router',
'ngAnimate', // animations using animate.css
'ngMessages', // ng messages to validate form
'ui.bootstrap', // angular bootstrap directives
])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('app', {
abstract: true,
template: '<h2>test state</h2>'
})
.state('app.lide', {
url: '/lide',
template: '<h2>test lide</h2>'
})
.state('app.skoleni', {
url: '/skoleni',
template: '<h2>test skoleni</h2>'
});
})
.run(function ($rootScope, $window) {
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
console.log('success');
console.log(toState)});
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
console.log('error')});
})
/*
* main controller
*/
.controller('BodyController', function ($scope, $state, $stateParams, $http, $timeout, $rootScope) {
// Expose $state and $stateParams to the <body> tag
$scope.$state = $state;
$scope.$stateParams = $stateParams;
});
、ui-viewはテキストtest stateすべての時間を示しており、エラーがトリガされません。アプリケーションはシームレスに状態を切り替えるように見えますが、テンプレートはui-viewにレンダリングされません。