Tenho uma explicação passo a passo no meu aplicativo, que compreende 4 páginas. Decidi fazer do Passo a passo um único estado com várias visualizações para representar cada uma das 4 páginas.

No meu html, defino uma div como uma visualização da interface do usuário apontada para a visualização atual, que meu controlador muda conforme necessário.

O problema é que, quando atualizo o $ scope.currentView para 'geral', ele não muda o que realmente é visto na tela! Se eu o alterar manualmente para 'geral' na minha função _init, ele exibirá a página geral, mas não será possível alterá-lo com base no clique de um botão.

HTML:

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

Controlador:

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

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

Minha definição de estado:

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

E o botão para atualizar a exibição:

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

Atualização 1

Eu tentei o seguinte para resolver, nenhum dos quais funcionou:

Alterando currentView para uma função getter getCurrentView () que retorna o currentView. Mesmo comportamento.Agrupando o configurador currentView em um $ scope. $ Apply. Obtenha o erro $ apply já em andamentoAgrupando o configurador currentView em um $ timeout. Mesmo comportamento

Atualização 2

Eu adicionei um<pre> seção que chama o código idêntico ao da interface do usuário,{{currentView}}@walkthrough. Ele mostra a exibição correta, mesmo que a própria página não atualize a exibição da nova exibição.

Atualização 3

Eu tentei todas as combinações de como definir programaticamente a exibição, mas nada que eu tentei funcionou. Quer eu use um servidor para capturar a visualização, função, variável de escopo direto $, nada. A variável em si está correta, mas a exibição simplesmente não muda quando eu altero a variável.

O estranho é que funciona uma vez quando eu defino o valor do currentView na minha função init (). Funciona se eu alterar o valor para uma das próximas exibições no próprio código ($ scope.currentView = 'general' <- isso mostra a página geral), mas não se eu clicar em um botão, altere o currentView para 'general' .

Eu tentei todos os tipos de $ scope. $ Applys, $ digest e $ timeouts. Nada do que fizer fará com que a visualização seja atualizada. A única coisa que resta é transformá-lo em um monte de divs com ng-show / hide, o que é realmente feio e difícil de administrar, e a razão pela qual eu queria usar as visualizações em primeiro lugar.

Atualização 4

Ainda não há progresso, independentemente do que eu tente ... Eu pensei que alguma combinação estranha de envolver a alteração de variável em um tempo limite de $ poderia ser útil, mas, infelizmente, nada. Meu último pensamento foi mudar tudo isso para seus próprios estados independentes, mas depois vou acabar com um monte de código duplicado que obviamente não é bom. Eu uso quase o mesmo tipo de alteração em outra seção do meu aplicativo (para alterar estados, mas não visualizações), e funciona perfeitamente. Não consigo descobrir por que não posso mudar a exibição dinamicamente. Qualquer ajuda seria muito apreciada.

Atualização 5

Teve alguma casa após o comentário do usuário abaixo, mas não levou a lugar algum. Tentei chamar todas as alterações de $ state para atualizar a exibição, mas nada funcionou. Tentei todas as etapas a seguir, nenhuma das quais teve impacto na página:

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