标签: nested-views
Angular ui-router:嵌套视图与多个视图
ui-router是angular标准路由器的绝佳替代品; 它支持嵌套状态和视图以及多个视图.
但是,由于两者之间的差异,我有点困惑.在我看来,几乎总是可以将多个视图视为"高阶"组件的嵌套视图.例如,如果我们考虑具有侧边栏和内容框的应用程序,我们可以将它们建模为两个"并行"视图,或者将侧边栏设置为父视图,将内部窗格设置为依赖于所选侧边栏项目的嵌套子视图.
自述文件似乎表明这种划分并不是很明确:
专业提示:虽然多个并行视图是一个强大的功能,但您通常可以通过嵌套视图并将这些视图与嵌套状态配对来更有效地管理界面.
什么时候应该使用多个视图和嵌套视图？是否有一些标准可以帮助您选择大部分时间,这是建模状态的正确方法,嵌套与多个？
推荐指数
解决办法
查看次数
Angular UI-Router:URL已更改但未加载视图
我正在使用嵌套视图处理我的UI-Router应用程序.我定义了一些这样的状态:
$stateProvider
.state('parent', {
url: "/parent",
views: {
'area1': {templateUrl : 'parentView.html'},
'area2' : ... // some other areas + template
}
})
.state('parent.child1', {
url: "/child1",
views: {
'area1' : {templateUrl : 'child1View.html'},
'area2' : ... // still some other areas, not changing
}
})
.state('parent.child2', {
url: "/child2",
views: {
'area1' : {templateUrl : 'child2View.html'},
'area2' : ... // still some other areas, not changing
}
})
使用该应用程序时,我将主视图划分为一些区域.在第一个区域,我使用特定的html文件.如果我点击链接,应用程序将进入子状态$state.go('myState').此时,URL已更改,但子视图未加载到页面中.
我在网站上搜索了答案,我发现这个问题来自另一个似乎在这里遇到同样问题的人:Angular Router - Url更改但视图无法加载
你知道我错过了什么吗？
抱歉英语不好
推荐指数
解决办法
查看次数
褪色的英雄在共享元素转换中看到了孩子
我很好奇Android如何在Google Keep中看到的共享元素转换中处理英雄视图的子项:
在标准共享元素转换中,在输入动画中,调用活动中的英雄视图会立即覆盖目标视图(在起始维度),然后转换动画在目标视图的维度中进行更改以到达其新位置.
但是,在返回动画上,返回活动的视图保留在叠加层的顶部,它们是在动画结束之前显示的视图,此时目标(调用活动的)英雄视图会捕捉到位.
如果两个英雄视图的内容存在任何差异,则会产生非常刺耳的效果 - 例如,线条换行的文本视图或完全不同的子视图.
与此同时,在Google Keep中,共享元素转换似乎在每个方向来回淡化内容视图,因此这种不和谐的效果相当不太明显.因此,填充或换行等方面的差异要小得多.
在我自己的应用程序中实现此功能的最佳方式是什么？
这是一个例子:
推荐指数
解决办法
查看次数
Ionic $ state.go不在设备上工作
我正在开发一款应用程序,使用Ionic进行构建.我的问题是$ state.go只能在浏览器中工作,但不能在手机上工作.这似乎是一个常见的问题,但在阅读了相同问题的大量答案后,我仍然无法弄清楚如何解决它.
一般修复似乎是为了确保您使用相对URL,如下所述:使用带有Phonegap的Angular UI-Router,但我仍然无法使其工作.我错过了什么？
链接到plunker:http://plnkr.co/edit/qFJ1Ld6bhKvKMkSmYQC8？p = preview
App.js结构:
....
$stateProvider
.state('parent', {
url: "/",
templateUrl: "parent.html"
})
.state('parent.child', {
url: "child",
templateUrl: "child.html"
})
$urlRouterProvider.otherwise("/")
})
....
推荐指数
解决办法
查看次数
角UI路由器的“解析”触发两次
我正在使用角度ui路由器来处理前端的某些路由。这就是我的路由代码的样子。
// angular config
$stateProvider.state('app', {
templateUrl: '/static/partials/home.html',
controller: 'NavCtrl'
});
$stateProvider.state('app.reader', {
url : '/reader/*path?start&end&column&page',
templateUrl: '/static/partials/reader.html',
resolve : {
panelContent : [
'$state', '$stateParams', '$http',
function ($state, $stateParams, $http) {
alert('resolving panel Content');
return []; // simplest thing possible to illustrate my point
}
]
},
controller: 'ReaderCtrl'
});
/// etc etc
$urlRouterProvider.otherwise('/reader/');
我的html使用了多个嵌套视图，我会尽力说明
index.html
<html>
<div ui-view></div> <!-- /static/partials/home.html gets injected here -->
</html>
/static/home.html
<html>
<!-- some side bar stuff -->
<!-- reader --> …推荐指数
解决办法
查看次数
ui-router嵌套视图访问多个控制器
使用ui-router,州的任何子孙都可以访问他们的父母和祖父母控制器吗？
所以例如.state(resources.resource.rates).rate状态控制器可以访问资源和资源中的$ scope.objects(它们都有自己的控制器)吗？
在假设我有一个html设置,其中一切都是资源内的嵌套视图与ui-view ="content2".但是我在资源中有另一个页面称为费率我想在与资源相同的嵌套视图中打开,但也可以访问资源控制器.
.state('resources.resource.rates', {
url: '/rates',
views:{
"content2":{
templateUrl: 'templates/rates.html',
controller: 'CreateRatesCtrl'
}
}
})
我的视图中的ng-href链接到/resources/{{resource.Id}}/rates但不打开资源ui-view中的rates页面.
所以我尝试将视图设置为content2 @ resources,就像这样
views:{
"content2@resources":{
templateUrl: 'templates/rates.html',
controller: 'CreateRatesCtrl'
}
}
这是因为html现在在资源ui-view中填充rates.html,并且ng-href作为resources/{{resource.Id}}/rates填充,但不幸的是我只能访问资源范围对象.我有一个资源控制器所需的resourceId.在这种情况下,设置content2 @ resources是否限制我的范围只能访问资源控制器？如果是这样我怎么能这样做,所以我也可以访问资源控制器？
推荐指数
解决办法
查看次数
嵌套ViewPager不显示
我正在编写一个使用嵌套ViewPager的应用程序。每个父ViewPager包含7个子ViewPager。
它适用于第一个父级，但是到达下一个页面时，它在子级Viewpager处显示为空白。
这里有什么建议，甚至可以使用Nested View分页器吗？如果是的话，如何避免这种情况？
父ViewPager布局，与子片段相同：
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:customfont="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/calendarViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
这是我从父级ViewPager片段执行的子级ViewPager适配器实现：
private void processDatacardAdapter(View view) {
childViewPager = (ViewPager) view.findViewById(R.id.childViewPager);
childSlidePagerAdapter = new ChildSlidePagerAdapter(parentActivity.getSupportFragmentManager());
childViewPager.setAdapter(childSlidePagerAdapter);
childViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
Utils.showToast(parentActivity, "sds position : " + position);
}
});
}
推荐指数
解决办法
查看次数