2015-04-13 2 views
0

Я пишу приложение CRUD с AngularJS + UI Router.Как переключиться на состояние ui-router условно?

Я хочу иметь возможность анализировать текущее местоположение в URL-адресе браузера и определять, должно ли быть использовано состояние ui-router для текущего URL-адреса.

В этих типовых маршрутах существует ли какой-либо способ сделать статьи if и unless?

(адрес в адресной строке браузера является http://example.com/notes/1/edit_me)

$stateProvider.state("root", { 
    url: "", 
    unless: $location.matches(/\edit_me/) 
}) 

$stateProvider.state("edit", { 
    url: "/edit", 
    if: $location.matches(/\edit_me/) 
    // 
}) 

UPDATE 1 Поэтому я хочу сделать выше:

Скажите, что я нахожусь в http://example.com/notes. Маршруты является

$stateProvider.state("root", { 
    url: "", 
}) 

Однако, с тем же выше состоянием ui.route, когда я нахожусь на URL http://example.com/notes/edit, то root теперь "/ примечание/редактирование" вместо "/ нот"

UPDATE 2 @adam, больше объяснений того, что я пытаюсь сделать:

Я попытаюсь объяснить: в вашем коде, для home состояния (ui.router в) url является / (так называемый хэш синтаксис #!/)

Однако URL в адресной строке браузера выглядит http://example.com/notes/ в одном случае и http://example.com/notes/edit в другом случае. (Обратите внимание, что URL-адрес не содержит какую-либо #! части, так как мы просто переходите на страницу)

Теперь home «s / будет соответствовать в обеих случаях выше URL. Но поскольку второй URL-адрес заканчивается на notes/edit, я хочу, чтобы home для этого URL-адреса должен быть #!/edit, а не #!/.

В основном я пытаюсь смешивать серверные оказанные страницы (/notes и /notes/edit визуализируются на сервере, а не AngularJS) и на стороне клиента маршрутизации, так что независимо от того, какой URL мы находимся, клиент может выяснить, какие (ui.router) применяется к текущему URL-адресу.

Имеют смысл?

+0

Могу ли я знать exactely в вас случае, почему вы хотите, чтобы проверить URL? Вы хотите, например, установить активный класс css? – adam

+0

Спасибо @adam, я обновил вопрос по причине – Zabba

ответ

0

К сожалению я не очень понимаю ваши потребности, но вот пример использования UI-маршрутизатора:

$stateProvider 
    .state('home', { 
    url: '/', 
    templateUrl: 'app/main/index.html', 
    controller: 'MainCtrl' 
    }) 
$stateProvider 
    .state('edit', { 
    url: '/edit', 
    templateUrl: 'app/edit/edit.html', 
    controller: 'EditCtrl' 
    }) 
$stateProvider 
    .state('edit.note', { 
    url: '/note', 
    templateUrl: 'app/edit/note.html', 
    controller: 'NoteCtrl' 
    }); 

$urlRouterProvider.otherwise('/'); 

я не уверен, если копия паста будет работать, но попытаться адаптировать его с вашим дело. Надеюсь, это поможет.

Edit:

Я боюсь, что я не могу помочь вам больше. Дизайн вашего приложения с визуализированной страницей без угловых звуков действительно особенный. Вы попробовали пример, который я вам предоставляю? Если да, то вы просто форматируете URL-адрес addind

"#!/", где он вам нужен.

Например:

$stateProvider 
    .state('edit', { 
    url: '#!/edit', //or something like, url:'/#!/edit' 
    templateUrl: 'app/edit/edit.html', 
    controller: 'EditCtrl' 
}); 

Проверить эту ссылку также может быть, это поможет вам: https://github.com/angular-ui/ui-router/issues/372

щ-sref может помочь вам Но место, чтобы увидеть полезную пример для Ui-маршрутизатора это его собственный документ. https://github.com/angular-ui/ui-router

и здесь: http://angular-ui.github.io/ui-router/site/#/api/ui.router

+0

Эй, спасибо @adam. Я отредактировал вопрос, чтобы объяснить больше. – Zabba

Смежные вопросы