ui-router onEnter hook уволен несколько раз

Question

Я переношу свое приложение на ui-router 1.0.0, и у меня есть эта проблема с вложенными состояниями, когда onEnter $ переходы перехватывает столько же раз, сколько у многих родителей состояние (то есть, насколько глубоко он вложен), независимо от того, фильтрует ли я состояние в моем крючке или нет. Ожидается ли это или ошибка?

$stateProvider 
    .state("root", { 
    url: "/" 
    }) 
    .state("root.child", { 
    url: "/child" 
    }) 
    .state("root.child.child", { 
    url: "/child", 
     data: { 
     foo: "bar" 
    } 
    }); 


$transitions.onEnter(
    {to: state => state.data && state.data.foo === "bar"}, 
    transition => 
    console.log(`on enter triggered`, transition.from(), transition.to()) 
); 

$state.go("root.child.child"); 

В этом примере крюк уволен 3 раза.

Вот fiddle.

Answer 1

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

---

Ожидается, что это основано на том, как вы закодированы крючок. Крючок onEnter основан на состоянии. Псевдокод для обработки onEnter выглядит следующим образом:

Когда первоначально собираемся root.child.child есть три состояния, вводимые: root, root.child, root.child.child.

Ваши критерии: { to: state => state.data && state.data.foo === "bar" } которые соответствуют для каждого из трех состояний, которые вводятся. Это потому, что, хотя три состояния вводятся, есть только одно «состояние», которое равно root.child.child. Данные этого состояния имеют данные foo: 'bar', поэтому они совпадают.

Вы должны изменить критерии, чтобы использовать entering вместо to.

{ entering: state => state.data && state.data.foo === 'bar' } 

Вот обновленная скрипка: https://jsfiddle.net/2m63pvqb/1/

Некоторых другие подходы, которые могли бы работать:

Положите onEnter на самого государстве

.state("root.child.child", { 
    url: "/child", 
     data: { 
     foo: "bar" 
    }, 
    onEnter: ($transition$, $state$) => do sommething specific when entering root.child.child 
    }); 

сделать что-то один раз в переход, если какое-либо государство, будучи введенные данные.foo === 'bar'

$transitions.onStart({ entering: state => state.data && state.data.foo === 'bar' }, trans => 
     // do something 

Answer 2

Используйте app.js для проверки того, нажата ли клавиша enterbutton. Там вы можете вставить функцию, такую ​​как $rootScope.hitEnter = function(){ }); в область выполнения. Это должно работать лучше, чем в конфигурационной области.