Динамически изменяющийся вид в AngularJS UI-Router

У меня есть пошаговое руководство в моем приложении, которое состоит из 4 страниц. Я решил сделать пошаговое руководство одним состоянием с несколькими представлениями для представления каждой из 4 страниц.

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

Проблема в том, что когда я обновляю $ 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

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

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

Обновление 2

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

Обновление 3

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

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

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

Обновление 4

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

Обновление 5

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

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

Ответы на вопрос(2)

Ваш ответ на вопрос