AngularJS UI-роутер - Сгенерировановозвращает текущий URL - PullRequest
Новая
       5

AngularJS UI-роутер - Сгенерировановозвращает текущий URL

0 голосов
/ 13 мая 2018

Я новичок в angularjs и искал ответ на эту проблему, но, к счастью, я не могу его найти. Я знаю, что angularj (1.x) старше, но я все равно хотел изучить это в любом случае.

Продолжая, я пытаюсь динамически генерировать ссылки на основе объекта $ scope.menu_item внутри контроллера моего модуля.Например, если 

$scope.menu_items = ['Home','Profile','Settings']

, значения в массиве соответствуют дочерним состояниям родительского состояния User и настраиваются с использованием $ stateProvider.state () 

$stateProvider
.state('user'{
 url:'/user',
 abstract:true, 
 templateUrl:'someTemplateThatSeemsToWork',
 controller:'MenuCtrl'})

//these are the child states
.state('user.Home',{
 url:'/home',
 template:'<p>Home</p>' (this is loaded in the template of its parent)
})
.state('user.Profile',{
 url:'/profile',
 template:'<p>Profile</p>'
})
.state('user.Settings',{
 url:'/settings',
 template:'<p>Settings</p>'
 })

затем это в шаблоне с помощью ng-repeat: 

<li ng-repeat="menu_item in menu_items">
<a ui-state="user.{{menu_item}}">{{menu_item}}</a>
</li>

Как и ожидалось, он правильно отображает представление, значения из $ scope.menu_items правильно преобразованы в ссылки , но атрибут href = "" тега равен текущему URL.

Состояние по умолчанию - user.Home, поэтому / user перенаправляет на / user / home (localhost: [port] / user / home) 

<a ui-state="user.Home" class="ng-binding" href="/user/home">Home</a>
...
<a ui-state="user.Profile" class="ng-binding" href="/user/home">Profile</a>
...
<a ui-state="user.Settings" class="ng-binding" href="/user/home">Settings</a>

Здесь мы видим, что все сгенерированные теги имеют значение href, установленное на текущий URL (localhost: [port] / user / profile превратится в href = "/ user / profile")

Так что я что-то забыл сделать?Насколько я понимаю, он должен работать, когда я использую ui-состояние, так как он может обрабатывать свойства $ scope.

Некоторые дополнительные примечания:

1.) Ручной ввод указанного URL-адреса состояния в адресной строкеработает отлично и отображает правильный шаблон

2.) Я использую Express для обработки на стороне сервера

3.) Я установил $ locationProvider.html5Mode (true)

Временное решение проблемы

Для людей, которые могут наткнуться на этот вопрос, я временно использовал решение проблемы и просто удалил ui-sref = "" или ui-state = "" и только что использованный 

ng-href={{state.url}}

с 

ng-repeat= "state in states"

где 

states = [{name="stateName", url="/relativeToRootUrl"},{..more States}]

Я все равно был бы признателен за решение этой проблемы с помощью пользовательского интерфейса-sref, поскольку он больше использует ui-router.Спасибо заранее!

...