UI的路由器查看

UI的路由器查看

关注
发信
关注(28)粉丝(399)

动态地改变AngularJS UI的路由器查看

本文介绍了动态地改变AngularJS UI的路由器查看的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

我在我的应用程序，它包括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

我曾尝试以下解决的，其中没有工作：


  1. 更改currentView一个getter函数getCurrentView（）的返回currentView。相同的行为。

  2. 结束语在$范围currentView制定者。$适用。获得$正在进行中的错误已经适用

  3. 中包装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.ge​​neral'，{
            网址：'/一般，
            观点：{
                walkthrough.ge​​neral@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.ge​​neral/＆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:

  1. Changing currentView to a getter function getCurrentView() which returns the currentView. Same behavior.
  2. Wrapping the currentView setter in a $scope.$apply. Get the $apply already in progress error
  3. 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的路由器查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

09-06 21:39
Powered by LMLPHP ©2024 UI的路由器查看 0.033541