使用 ui-router 和 AngularJS 的多个嵌套 ui-views

2024-02-25

我只想首先说,我尽可能多地查看了与此问题相关的堆栈溢出问题,但没有看到任何与我遇到的问题有关的问题。有些很相似,但又不完全一样。问题是这样的:

我设置了以下 $stateProvider:

$stateProvider.
    state('root', {
        url: '',
        views: {
            'ViewA': {
                templateUrl: 'ViewA.html',
                controller: ViewAController
            },
            'ViewB': {
                templateUrl: 'ViewB.html',
                controller: ViewBController
            },
            'ViewC': {
                templateUrl: 'ViewC.html',
                controller: ViewCContoller
            }
        }
    });

以下是与之配套的index.Html:

<head>
    <title>Angular PoC</title>       
</head>
<body ng-controller="DashboardController">
    <!-- Account View for logging in -->
    <div ui-view="ViewA" ng-hide="currentlyLoggedIn"></div>

     <!-- Used to toggle the two main views -->
    <div ng-show="currentlyLoggedIn">
        <button ng-click="activateViewB()"> View B </button> 
        <button ng-click="activateViewC()"> View C </button>
    </div>

    <!-- These are the two main views -->
    <div ui-view="ViewB" ng-show="currentlyLoggedIn && currentViewB"></div>
    <div ui-view="ViewC" ng-show="currentlyLoggedIn && currentViewC"></div>
</body>

这是ViewC.html:

<div>
    This is ViewC
    <div ui-view="ViewCDetails"></div>
</div>

我需要让所有 ViewA、B、C 基本上彼此独立运行,基本上它们都是自己的状态机。他们需要保持相同的视图,因为所有三个人都需要保持自己的状态,即使其他人之一发生变化。我遇到的最大问题是我无法初始化“ViewCDetails”,并且无法添加任何影响其中一个视图的状态而不托管其他两个视图。有没有一种方法可以添加仅影响其中一个视图而不会对其他两个视图产生不利影响的状态?另请注意,这应该是 SPA,因此它不是 URL 驱动的。


$stateProvider.
    state('root', {
        url: '',
        views: {
            'ViewA': {
                templateUrl: 'ViewA.html',
                controller: ViewAController
            },
            'ViewB': {
                templateUrl: 'ViewB.html',
                controller: ViewBController
            },
            'ViewC': {
                templateUrl: 'ViewC.html',
                controller: ViewCContoller
            },
            'ViewCDetails@root': {
                templateUrl: 'ViewCDetails.html',
                controller: ...
            }
        }
    });

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 ui-router 和 AngularJS 的多个嵌套 ui-views 的相关文章

随机推荐

  • Matlab FFT 和 FFTW

    我正在尝试使用 FFTW 和 Matlab 进行相同的 FFT 我使用 MEX 文件来检查 FFTW 是否良好 我认为我的一切都是正确的 但是 我从 FFTW 得到荒谬的价值观 在同一输入信号上多次运行 FFTW 代码时 我没有得到相同的结
  • 如何在单个端口上同时运行tcp和udp?

    我遇到过这样的情况 我必须一次在一个端口上运行 UDP 和 TCP 这是因为在我的应用程序中任何人都可以随时调用任何协议 所以我需要不断检查传入的请求并服务该请求 谁能帮我摆脱java中的这种情况吗 您无法检查请求是 TCP 还是 UDP
  • React-Redux-Thunk:操作不返回调度

    我正在使用 React Native 和 Redux thunk 中间件 我的问题是调度函数不返回对象 甚至不控制台 这是我的操作文件 function movieSelc movie return type types MOVIE SEL
  • Lua:特定长度的字符串

    local data here is a string local no 12 foo string format 50s 05d data no print foo len string format q foo defines foo作
  • Intellij 有时无法为对象堆保留足够的空间

    已解决 检查下面的解决方案 我使用的是 Intellij Idea 2017 2 2 以下是我的 Intellij 规格 我的 Intellij 仅偶尔会在 Maven 构建失败或 jboss 服务器启动时出现错误 Error occurr
  • 所有 css 字体属性的一个 css 声明

    将所有 css 字体属性放入一个值的正确语法是什么 body font 12px arial red 类似的东西 但具有所有选择器和属性 body font bold italic 15px 20px arial sans serif co
  • jQuery 动画滚动

    我不知道如何调用该效果 但是有人可以向我指出一个可以帮助我实现与该网站相同的效果的库吗 http www makr com http www makr com 基本上 当鼠标单击时 它会将行向上移动到页面顶部 如果没有这样的专门效果库 代码
  • Instagram api - 按主题标签获取所有照片

    我是这个 Instagram API 的新手 我阅读了他们关于端点的文档 这是我正在使用的端点 v1 tags tag name media recent access token ACCESS TOKEN 它正在获取图像 但是 仅在我的帐
  • HTML 文档中的非 HTML 标签对 SEO 不利吗? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 页面中包含非 HTML 标签是一种不好的做法吗 我需要将它们用于内部内容处理需求 并想知道它是否有任何问题 例如 SEO 是的 这很糟糕
  • 动态导入,不带捆绑文件

    我有一个与 Webpack 捆绑在一起的 React 项目 我有一个组件 我希望它动态渲染组件 就我而言 组件的路径来自 props 另外 这些组件没有捆绑在我的项目 js 文件中 它们是外部 React 组件 库 我尝试过动态 ES6 导
  • 除非是纯文本,否则 SVG 外来对象内容不会显示

    我正在尝试使用 SVG 绘图中的foreignObject 标签输出 HTML 我正在使用 d3 生成元素 只有当foreignObect 标签内的内容是纯文本时 foreignObject 标签内的HTML 内容才会显示 否则它只会显示为
  • ServiceStack Redis,如何以列表形式返回Lua表

    我正在使用 ServiceStack 的 Redis 客户端 我有一个 Lua 脚本 它使用多个 Redis 调用的结果填充 Lua 表 我想以某种方式返回这张表 我的想法是使用客户端库中的 ExecLuaShaAsList 方法 并在 l
  • 测试是否安装了字体

    有没有一种简单的方法 在 Net中 来测试当前计算机上是否安装了字体 string fontName Consolas float fontSize 12 using Font fontTester new Font fontName fo
  • Django Rest 框架、CSRF 和 Vue.js

    我正在尝试使用 Vue js 对我使用 Django Rest Framework 创建的 REST Api 执行一些 POST 方法 问题是 我得到了CSRF Failed CSRF token missing or incorrect
  • 惰性求值和短路求值有什么区别?

    来自维基百科 惰性评估 http en wikipedia org wiki Lazy evaluation is 在编程语言理论中 惰性求值或按需调用是 延迟表达式求值的求值策略 直到需要它的值为止 短路评估 http en wikipe
  • 从 R 的句子中提取动词?

    请注意 我知道从文本中提取名词和动词 https stackoverflow com questions 2970829 extracting nouns and verbs from text它对我不起作用 因为他们使用的功能不存在于op
  • Android HTML Jsoup

    我试图从我的拼贴新闻网站获取图像的绝对 URL 但到目前为止还没有成功 我正在这个网站上工作http www dcu ie news index shtml http www dcu ie news index shtml 正如您从源中看到
  • Angular 2 AsynPipe 不支持 Observable

    我收到以下错误 EXCEPTION Cannot find a differ supporting object object Object in files async in Images 1 9 这是模板的相关部分 img 这是我的代码
  • 如何使基类中的所有隐藏名称在派生类中可访问?

    从这个问题开始 从纯虚类 A 派生的指针无法访问纯类 B 的重载方法 https stackoverflow com questions 59756738 pointer derived from pure virtual classa c
  • 使用 ui-router 和 AngularJS 的多个嵌套 ui-views

    我只想首先说 我尽可能多地查看了与此问题相关的堆栈溢出问题 但没有看到任何与我遇到的问题有关的问题 有些很相似 但又不完全一样 问题是这样的 我设置了以下 stateProvider stateProvider state root url