Javascript AngularJS UI路由器中视图的动态更改

我的应用程序中有一个包含4页的演练。我决定将演练设置为一个状态，并使用多个视图来表示4个页面中的每个页面

在我的html中，我将div定义为指向当前视图的ui视图，然后我的控制器根据需要对其进行更改

问题是，当我将$scope.currentView更新为“general”时，它不会改变屏幕上实际显示的内容！如果我在我的_init函数中手动将其更改为“general”，它确实会显示general页面，但我无法通过单击按钮进行更改

HTML:

我的国家定义：

.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')" />

---

虽然ui-view指令将为视图名称获取一个插值（

{{something}}

），但它实际上并不监视此更改。相反，视图更新仅由

$stateChangeSuccess

和

$viewContentLoading

事件触发。这就是为什么你可以观察到它第一次工作，而且只有第一次

您可以通过查看ui路由器源代码中

$ViewDirective

的链接函数来验证这一点

---

这意味着您的

setView

函数需要调用

$state.go

来触发状态更改，而不仅仅是在作用域上设置属性。与通常的状态更改过程一样，这最终会导致广播一个

$stateChangeSuccess

事件。

因此，我解决了这个问题，只需使每个演练页面都有自己从父演练继承的状态，每个都有一个视图。也许不是最好的方法，但我不想在这上面浪费更多的时间

我仍然希望有一个方法只使用嵌套视图并以这种方式导航，因为将来使用该方法添加更多内容会更容易，而不会使我的stateProvider膨胀

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

现在我可以使用

您能在单击时发布视图ID如何传递到

setView

的代码吗？@Aweary@Aweary我使用ng click=“currentView='general'”进行了校正，但这根本不会改变视图（即使在查看调试VAL时也是如此），谢谢，但这不起作用。我不是在改变状态…只是在改变观点。我尝试调用$state.go（'walkthrough'），但这没有做任何事情，因为这是我的当前状态。这就是“更改视图”的要点，您必须更改状态。但是，如果您已经处于漫游状态，并调用$state.go（'walkthrough'），路由器将不会重新加载该状态，除非您明确告诉它（reload:true）。我有reload:true（如您在我的帖子更新5中所看到的），但它仍然无法工作。最后，我重新编写了整个部分，所以现在每一页都是关于父级“演练”的子状态，工作得很好。

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

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

        .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" />