Я хочу загрузить страницу по щелчку элемента меню в моем меню, но состояние отражается в моем URL-адресе браузера, и содержимое этой страницы не загружается, поскольку я изучал состояния учебника, объявляются так только, мой код не показывает мне никакой ошибки также.
вот мой файл route.js
app.config(function config($stateProvider)
{
$stateProvider.state("index",{
url:"",
controller:"MainCtrl",
templateUrl:"templates/home/home.html"
}),
$stateProvider.state("development",{
controller:"EmployeeCtrl",
templateUrl:"templates/employee/employee.html"
});
})
Это мой список на домашней странице, чей href
я заявил, что состояние моего индекса работает отлично.
<ul class="nav navbar-nav">
<li class="active"><a href="#/development">Development</a></li>
<li><a href="#/design">Design</a></li>
<li><a href="#/exercise">Exercise</a></li>
<li><a href="#/humor">Humor</a></li>
</ul>
Вот код для страницы employee.html
, содержимое которого я хочу отобразить, когда состояние разработки выполнено.
<div>
<input type="text" ng-model="searchText">
<table>
<tr ng-repeat="emp in employee.data | filter:searchText"></tr>
<td>{{emp.firstname}}</td>
<td>{{emp.lastname}}</td>
</table>
</div>
Состояние должно быть дифференцировано на основе их URL-адресов, поэтому вам нужно добавить параметр url
в ваше состояние, которое должно быть url: '/development',
для состояния development
, чтобы при изменении URL-адресов в браузере определялось $stateProvider
а затем загрузить указанный controller
и template
по определению состояния.
Код
$stateProvider.state("development",{
url: '/development',
controller:"EmployeeCtrl",
templateUrl:"templates/employee/employee.html"
});
Вы также должны использовать директиву ui-sref
чтобы убедиться, что ваш href
создан правильно. Вам нужно только указать stateName
только в ui-sref
он будет отображать значение из url
как для ui-sref="development"
это будет href="#/development"
Используйте ui-sref
для государственной маршрутизации. Делать:
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="development">Development</a></li>
<li><a ui-sref="design">Design</a></li>
<li><a ui-sref="exercise">Exercise</a></li>
<li><a ui-sref="humor">Humor</a></li>
</ul>
ui-sref
помог?