Динамически меняющийся вид в UL-маршрутизаторе AngularJS

Question

У меня есть прохождение в моем приложении, которое состоит из 4 страниц. Я решил сделать Прохождение одним состоянием с несколькими видами, чтобы представить каждую из 4 страниц.

В моем html я определяю div как ui-view, указывающий на текущий вид, который мой контроллер затем меняется по мере необходимости.

Проблема в том, что я обновляю $ scope.currentView для «общего», это не меняет то, что на самом деле видно на экране! Если я вручную изменил его на «general» в моей функции _init, он отобразит общую страницу, но я не могу изменить ее на основе нажатия кнопки.

HTML:

<div ui-view="{{currentView}}@walkthrough"></div> 

Контроллер:

var _init = function() { 
    $scope.currentView = 'welcome'; 
}; 
_init(); 

$scope.setView = function (view) { 
    $scope.currentView = view; 
}; 

Мое состояние определение:

.state('walkthrough', { 
    url: '/walkthrough', 
    views: { 
     '': { 
      templateUrl: 'app/walkthrough/walkthrough.html', 
      controller: 'walkthroughController' 
     }, 
     'welcome@walkthrough': { 
      templateUrl: 'app/walkthrough/welcome.html' 
     }, 
     'general@walkthrough': { 
      template: 'general' 
     } 
    } 
}) 

и кнопку, чтобы обновить вид:

<img class="start-button center-block" ng-click="setView('general')" /> 

---

Обновление 1

Я попытался следующие решить, ни один из которых работал:

1. Изменение CurrentView к функции газопоглотитель getCurrentView(), который возвращает CurrentView. Такое же поведение.
2. Обнаруживает установку currentView в $ scope. $ Apply. Получите $ apply уже в процессе ошибки
3. Обнаруживание setView текущего времени в $ timeout. Такое же поведение

Обновление 2

Я добавил <pre> секцию, которая вызывает идентичный код, как и в UI-зрения, {{currentView}}@walkthrough. Он показывает правильный вид, даже если сама страница не обновляет отображение нового представления.

Update 3

Я попробовал все комбинации, как программно задать вид, но ничего я пробовал работал. Использую ли я сервер для захвата представления, функции, прямой переменной $ scope, ничего. Сама переменная корректна, но при изменении переменной вид просто не изменится.

Странная часть работает, когда я устанавливаю значение currentView в моей функции init(). Он работает, если я изменяю значение на одно из следующих представлений в самом коде ($ scope.currentView = 'general' < - это показывает общую страницу), но нет, если я нажму кнопку, измените currentView на 'general' ,

Я пробовал все виды $ scope. $ Applys, $ digests и $ timeouts. Ничто из того, что я делаю, не получит представление для обновления. Остается только сделать кучу divs с ng-show/hide, что действительно уродливо и больно для управления, и причина, по которой я хотел использовать представления в первую очередь.

Update 4

Тем не менее никакого прогресса, независимо от того, что я пытаюсь ... Я не думал, что некоторые странные комбинации оберточной переменной изменения в $ таймаут может оказаться полезным, но, увы, ничего. Моя последняя мысль заключалась в том, чтобы изменить все это на свои собственные независимые состояния, но тогда у меня будет куча дублированного кода, который, очевидно, не очень хорош. Я использую почти то же изменение в другом разделе моего приложения (чтобы изменить состояния, но не просмотры), и он отлично работает. Я не могу понять, почему я не могу изменить представление динамически. Любая помощь будет принята с благодарностью.

Update 5

Если бы какой-то дом после комментария пользователя ниже, но она имеет не приведут ни к чему. Я попытался вызвать всевозможные изменения $ state, чтобы обновить представление, но ничего не сработало. Я пытался все наблюдения, ни один из которых имел никакого влияния на странице:

$state.reload(); 
$state.go($state.current, {}, { reload: true }); 
$state.transitionTo($state.current, $stateParams, { 
    reload: true, 
    inherit: false, 
    notify: true 
}); 

Answer 1

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

Мне все еще понравился метод, позволяющий просто использовать вложенные представления и перемещаться таким образом, так как будет легче добавить в будущем этот метод без раздувания моего stateProvider.

 .state('walkthrough', { 
      url: '/walkthrough', 
      views: { 
       '': { 
        templateUrl: 'app/walkthrough/walkthrough.html', 
        controller: 'walkthroughController' 
       } 
      } 
     }) 
     .state('walkthrough.welcome', { 
      url: '/welcome', 
      views: { 
       'walkthrough.welcome@walkthrough': { 
        templateUrl: 'app/walkthrough/welcome.html' 
       } 
      } 
     }) 
     .state('walkthrough.general', { 
      url: '/general', 
      views: { 
       'walkthrough.general@walkthrough': { 
        templateUrl: 'app/walkthrough/general.html' 
       } 
      } 
     }) 
     .state('walkthrough.business', { 
      url: '/business', 
      views: { 
       'walkthrough.business@walkthrough': { 
        templateUrl: 'app/walkthrough/business.html' 
       } 
      } 
     }) 
     .state('walkthrough.friends', { 
      url: '/friends', 
      views: { 
       'walkthrough.friends@walkthrough': { 
        templateUrl: 'app/walkthrough/friends.html' 
       } 
      } 
     }) 

Теперь можно легко перемещаться между использованием

<img ui-sref="walkthrough.general" /> 

Answer 2

Хотя директива щ-представление будет принимать интерполированное значение ({{ something }}) для названия вида, это не на самом деле это смотреть для изменений. Вместо этого просмотр обновлений запускается только событиями $stateChangeSuccess и $viewContentLoading. Вот почему вы можете наблюдать за работой в первый раз и только в первый раз.

Вы можете проверить это, посмотрев на функцию связывания для $ViewDirective в исходном коде ui-router: https://github.com/angular-ui/ui-router/blob/master/src/viewDirective.js.

Это значит, что для функции setView необходимо вызвать функцию $state.go, чтобы вызвать изменение состояния, а не просто установить свойство в области видимости. Как обычный процесс изменения состояния, это в конечном итоге приведет к трансляции события $stateChangeSuccess.