动态地改变AngularJS UI的路由器查看 [英] Dynamically changing View in AngularJS UI-Router
问题描述
我在我的应用程序，它包括4页的演练。我决定把演练在一个国家有多个意见，重新present每个4页。
在我的HTML我定义一个div作为UI的观点指出，目前看来，这我控制器然后根据需要改变周围。
问题是，当我更新$ scope.currentView通用它不会改变什么实际在屏幕上看到！如果我手动将其更改为一般在我的_init功能它只一般的页面，但我不能让它的基础上按一下按钮更改。
HTML
＆LT;格UI视图={{currentView}} @演练＆GT;＆LT; / DIV＆GT;
控制器：
VAR _init =功能（）{
$ scope.currentView =欢迎;
};
_在里面（）;$ scope.setView =功能（视图）{
$ scope.currentView =视图;
};
我的状态定义：
.STATE（'演练'，{
网址：'/演练'，
观点：{
''：{
templateUrl：应用程序/演练/ walkthrough.html'，
控制器：'walkthroughController
}，
欢迎@演练：{
templateUrl：应用程序/演练/ welcome.html'
}，
一般@演练：{
模板：常规
}
}
}）
和按钮更新视图：
＆LT; IMG类=启动按钮，中心块NG点击=的setView（通用）/＆GT;
更新1
我曾尝试以下解决的，其中没有工作：
- 更改currentView一个getter函数getCurrentView（）的返回currentView。相同的行为。
- 结束语在$范围currentView制定者。$适用。获得$正在进行中的错误已经适用
- 中包装currentView二传手在$超时。同样的行为
更新2
我添加了一个＆LT; pre＆GT; 部分，它调用相同code作为用户界面视图， {{ currentView}} @演练。它显示了正确的看法，即使页面本身不会更新显示新视图。
更新3
我已经试过了如何编程设置视图，但没有我尝试了所有的工作相结合。无论我用一台服务器来获取视图，功能，直线上升$范围变，什么都没有。变量本身是正确的，但认为只是当我改变变量将不会改变。
奇怪的部分是，当我在init（）函数设置currentView的价值它的工作一次。它的工作原理，如果我的值更改为在code本身的下一个视图（$ scope.currentView ='一般'＆LT; - 这表明普通页），但如果我做一个按钮，点击更改currentView 通用。
我试过$范围的所有方式。$ applys，$消化和$超时。没事我会得到的观点本身进行更新。唯一剩下的就是把它做成了一堆与NG-显示/隐藏div的这实在是丑陋和痛苦来管理，我想首先使用意见的原因。
更新4
仍然没有进步，不管我怎么努力...我想包装在$超时变量的变化可能会证明是有用的一些奇怪的组合，但很可惜，没有。我最后想到的是所有这些改变自己独立的国家，但我会用一堆重复code的这显然是不好收场。我用几乎是在我的应用程序的其它部分同类型的改变（改变状态，虽然，没有意见），它完美的作品。我想不通，为什么我不能动态地改变视图。任何帮助将大大AP preciated。
更新5
具有低于用户的评论后，一些家庭，但它有没有出路。我试图调用$状态更改的方式刷新视图，但没有奏效。我尝试了所有的随访，其中没有了页面上的任何影响：
$ state.reload（）;
$ state.go（$ state.current，{}，{重装：真}）;
$ state.transitionTo（$ state.current，$ stateParams，{
重载：真的，
继承：假的，
通知：真
}）;
所以我只需尽一切演练页面从父演练了自己继承的状态，每一个单一的视图解决了这个。可能不是最好的方法，但我不想浪费更多的时间在此。
我还是很想只使用嵌套视图和导航的方式，因为它会更容易添加更多的未来与方法，无需腹胀我stateProvider的方法。
.STATE（'演练'，{
网址：'/演练'，
观点：{
''：{
templateUrl：应用程序/演练/ walkthrough.html'，
控制器：'walkthroughController
}
}
}）
.STATE（'walkthrough.welcome'，{
网址：'/欢迎，
观点：{
walkthrough.welcome@walkthrough：{
templateUrl：应用程序/演练/ welcome.html'
}
}
}）
.STATE（'walkthrough.general'，{
网址：'/一般，
观点：{
walkthrough.general@walkthrough：{
templateUrl：应用程序/演练/ general.html
}
}
}）
.STATE（'walkthrough.business'，{
网址：'/业务，
观点：{
walkthrough.business@walkthrough：{
templateUrl：应用程序/演练/ business.html
}
}
}）
.STATE（'walkthrough.friends'，{
网址：'/朋友，
观点：{
walkthrough.friends@walkthrough：{
templateUrl：应用程序/演练/ friends.html
}
}
}）
现在我可以很容易地通过使用之间进行导航
＆LT; IMG UI-SREF =walkthrough.general/＆GT;
I have a walkthrough in my app which comprises 4 pages. I decided to make the Walkthrough a single state with multiple views to represent each of the 4 pages.
In my html I define a div as a ui-view pointed to the current view, which my controller then changes around as necessary.
The problem is, when I update $scope.currentView to 'general' it does not change what's actually seen on the screen! If I manually change it to 'general' in my _init function it does show the general page, but I cannot make it change based on a button click.
HTML:
<div ui-view="{{currentView}}@walkthrough"></div>
Controller:
var _init = function () {
$scope.currentView = 'welcome';
};
_init();
$scope.setView = function (view) {
$scope.currentView = view;
};
My state definition:
.state('walkthrough', {
url: '/walkthrough',
views: {
'': {
templateUrl: 'app/walkthrough/walkthrough.html',
controller: 'walkthroughController'
},
'welcome@walkthrough': {
templateUrl: 'app/walkthrough/welcome.html'
},
'general@walkthrough': {
template: 'general'
}
}
})
And the button to update the view:
<img class="start-button center-block" ng-click="setView('general')" />
Update 1
I have tried the following to solve, none of which worked:
- Changing currentView to a getter function getCurrentView() which returns the currentView. Same behavior.
- Wrapping the currentView setter in a $scope.$apply. Get the $apply already in progress error
- Wrapping the currentView setter in a $timeout. Same behavior
Update 2
I added a <pre> section which calls the identical code as in the ui-view, {{currentView}}@walkthrough. It shows the correct view, even though the page itself doesn't update the show the new view.
Update 3
I have tried every combination of how to programmatically set the view but nothing I've tried has worked. Whether I use a server to grab the view, function, straight up $scope variable, nothing. The variable itself is correct, but the view just won't change when I change the variable.
The strange part is it works once when I set the value of the currentView in my init() function. It works if I change the value to one of the next views in the code itself ($scope.currentView = 'general' <- this shows the general page), but not if I make a button click change the currentView to 'general'.
I've tried all manner of $scope.$applys, $digests, and $timeouts. Nothing I do will get the view itself to update. The only thing left is to make it into a bunch of divs with ng-show/hide which is really ugly and a pain to manage, and the reason I wanted to use views in the first place.
Update 4
Still no progress, regardless of what I try... I thought some weird combination of wrapping the variable change in a $timeout might prove useful but alas, nothing. My last thought was to change all of these to their own independent states, but then I'll end up with a bunch of duplicated code which is obviously not good. I use almost the same type of change in other section of my app (to change states though, not views), and it works perfectly. I cannot figure out why I can't change the view dynamically. Any help would be greatly appreciated.
Update 5
Had some home after user's comment below but it has lead nowhere. I have tried to call all manner of $state changes to refresh the view but nothing has worked. I tried all of the follow, none of which had any impact on the page:
$state.reload();
$state.go($state.current, {}, { reload: true });
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
So I solved this by just making every walkthrough page its own inherited state from parent walkthrough, each with the single view. Probably not the best method but I don't want to waste more time on this.
I would still love a method to just use nested views and navigate that way, since it'll be easier to add more in the future with that method without bloating my 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'
}
}
})
Now I can easily navigate between by using
<img ui-sref="walkthrough.general" />
这篇关于动态地改变AngularJS UI的路由器查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
