它可以正常工作。只需在应用程序的
config
部分中一次性配置您的
states
。请检查此
运行中的plnkr演示并将其与您的解决方案进行比较。确保您在父视图中有一个
<div ui-view=""></div>
。
索引视图
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-app="myApp">
<h2>AngularJS Ui router - Demonstration</h2>
<div data-ui-view=""></div>
</body>
</html>
品牌视图
<h1>Brands</h1>
<div>
<div>
<span ui-sref="brands.details({uid: brand.uid, brand: brand, product: product})">
<a href="">Brand</a>
</span>
</div>
<div>
<div ui-view=""></div>
</div>
</div>
AngularJS 应用程序
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/brands");
$stateProvider
.state("brands", {
url: "/brands",
controller: 'brandsController',
templateUrl: "brands.html"
}).state('brands.details', {
url: '/details/:uid',
controller: 'brandController',
templateUrl: 'brand.html',
params: { brand: null, product: null }
});
});
myApp.controller('brandsController', function () {
});
myApp.controller('brandController', function () {
});
ui-view
容器。 - Alon Eitan