Question

我是棱角分明的新人。在我的网络应用程序中，我在索引页面的模板中加载了一个ui-view的侧栏，还有另一个ui-view，我想从侧栏加载模板点击链接。这是我的代码和模板......请帮助我......

<!DOCTYPE html>
<html>
	<head>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	</head>
	<body ng-app="testapp" ng-controller="mainCtrl">
		<div class="container">
			<div class="row">
				<div class="col-md-4" ui-view="sidebar">
					
				</div>
				<div class="col-md-8" ui-view="content">
					
				</div>
			</div>
		</div>	



	<!-- Javascript links and scripts -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

	<script type="text/javascript">
		var app = angular.module('testapp', ['ui.router']);

		/*route configuration*/
		app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
				$urlRouterProvider.otherwise('home');

				$stateProvider.state('home',{
					views:{
						'sidebar':{templateUrl:'sidebar.html'},	
						'content':{templateUrl:'default.main.html'},					
					}
				});
				$stateProvider.state('home.page02',{
					views:{
						'content@home':{templateUrl:'page02.html'},
					}
				});

			}]);

		/*main controller at index page*/
		app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
			$state.go('home');
			
		}]);


	</script>

	</body>
</html>

<ul>
	<li>home</li>
	<li>page01</li>
	<li><a href="#" ui-sref=".page02">page02</a></li>
</ul>

<h2>Page 01 is here!</h2>

Answer 1

<li><a href="#" ui-sref=".page02">page02</a></li>

ui-sref必须包含州名。如果你想转到home.page02它应该是

<li><a href="#" ui-sref="home.page02">page02</a></li>

并且无需每次都给出$stateProvider.state() 就像

一样

$stateProvider
           .state('home', {url: '', template: ''})
           .state('home.page02', {url: '', template: ''})

并named-views使用https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views查看提供的链接。太棒了

Answer 2

在ui-routing中，我们可以使用ui-sref，它以完整的州名作为其值例如：

<li><a href="#" ui-sref="home.page02">page02</a></li>

并且控制器应该像：

var app = angular.module('testapp', ['ui.router']);

        /*route configuration*/
        app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
                $urlRouterProvider.otherwise('home');

                $stateProvider
                .state('home',{
                    views:{
                        'sidebar':{templateUrl:'sidebar.html'}, 
                        'content':{templateUrl:'default.main.html'},                    
                    }
                })
                .state('home.page02',{
                    views:{
                        'content@home':{templateUrl:'page02.html'},
                    }
                });

            }]);

        /*main controller at index page*/
        app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
            $state.go('home');

        }]);

Answer 3

我改变了剧本......

＆＃13;

app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
				$urlRouterProvider.otherwise('home');

				$stateProvider
				.state('home',{
					views:{
						'sidebar':{templateUrl:'sidebar.html'},	
						'content':{templateUrl:'default.main.html'},					
					}
				})
				.state('home.page02',{
					views:{
						'content@':{templateUrl:'page02.html'},
					}
				});

			}]);

＆＃13;

无法从侧边栏使用ui-router加载模板进行路由

3 个答案: