Tengo un tutorial en mi aplicación que consta de 4 páginas. Decidí hacer que el Tutorial sea un solo estado con múltiples vistas para representar cada una de las 4 páginas.

En mi html, defino un div como una vista ui apuntada a la vista actual, que mi controlador cambia según sea necesario.

¡El problema es que cuando actualizo $ scope.currentView a 'general' no cambia lo que realmente se ve en la pantalla! Si lo cambio manualmente a 'general' en mi función _init, muestra la página general, pero no puedo hacer que cambie en función de un clic en el botón.

HTML:

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

Controlador:

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

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

Mi definición 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'
        }
    }
})

Y el botón para actualizar la vista:

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

Actualización 1

He intentado resolver lo siguiente, ninguno de los cuales funcionó:

Cambiar currentView a una función getter getCurrentView () que devuelve currentView. Mismo comportamiento.Envolviendo el configurador currentView en $ scope. $ Apply. Obtenga el error $ apply ya en progresoEnvolviendo el configurador currentView en un tiempo de espera $. Mismo comportamiento

Actualización 2

Agregué un<pre> sección que llama al código idéntico al de la vista de interfaz de usuario,{{currentView}}@walkthrough. Muestra la vista correcta, aunque la página en sí no actualiza la nueva vista.

Actualización 3

He probado todas las combinaciones de cómo configurar la vista mediante programación, pero nada de lo que he probado ha funcionado. Si uso un servidor para capturar la vista, la función, la variable $ alcance directa, nada. La variable en sí es correcta, pero la vista simplemente no cambiará cuando cambie la variable.

La parte extraña es que funciona una vez cuando configuro el valor de currentView en mi función init (). Funciona si cambio el valor a una de las siguientes vistas en el código en sí ($ scope.currentView = 'general' <- esto muestra la página general), pero no si hago clic en un botón cambia la vista actual a 'general' .

He intentado todo tipo de $ scope. $ Applys, $ digests y $ timeouts. Nada de lo que haga conseguirá que la vista se actualice. Lo único que queda es convertirlo en un grupo de divs con ng-show / hide, que es realmente feo y difícil de manejar, y la razón por la que quería usar las vistas en primer lugar.

Actualización 4

Todavía no hay progreso, independientemente de lo que intente ... Pensé que alguna combinación extraña de envolver el cambio de variable en un tiempo de espera de $ podría ser útil, pero por desgracia, nada. Mi último pensamiento fue cambiar todo esto a sus propios estados independientes, pero luego terminaré con un montón de código duplicado que obviamente no es bueno. Utilizo casi el mismo tipo de cambio en otra sección de mi aplicación (para cambiar estados, no vistas), y funciona perfectamente. No puedo entender por qué no puedo cambiar la vista dinámicamente. Cualquier ayuda sería muy apreciada.

Actualización 5

Tenía algo de casa después del comentario del usuario a continuación, pero no ha llevado a ninguna parte. He intentado llamar a todo tipo de cambios de $ state para actualizar la vista, pero nada ha funcionado. Intenté todo lo siguiente, ninguno de los cuales tuvo ningún impacto en la página:

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