使用 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 的相关文章

  • TypeScript AngularJS 组件模态 - this.$modalInstance.dismiss 不是一个函数?

    我已将其中一个用户数据输入表单转换为 uib 模式 但是当我尝试从 取消 按钮关闭模式时 出现以下错误 this modalInstance dismiss is not a function 同样的事情是如果使用this modalIns
  • 如何并排展开和折叠三个div?

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89
  • 有效使用 Angular Promise 和 Defers

    在 Angular 以及所有 SPA JS 框架 中 假设页面导航对于用户来说非常快速且 无缝 此速度的唯一瓶颈是使用 API 调用从我们的服务器检索数据 因此 寻找一种解决方案似乎是合理的 在该解决方案中 我们可以在等待 API 调用获得
  • 角度 ui 路由器的动态参数

    我想知道在更改状态并发送请求以从后端获取模板时如何包含参数 这是我的应用程序 angular module questionnaireApp ngAnimate ui router ui bootstrap config stateProv
  • Angularjs 抛出 TypeError:无法读取未定义的属性“indexOf”

    我正在尝试调试上面的代码 我觉得这非常有用 gt 我什至找不到代码中的问题 也不知道从哪里开始 因为 Angularjs 对我来说仍然很新 我正在尝试本地化 Angularjs 应用程序 我知道为了获得帮助而缺少很多上下文 但我正在尝试查看
  • 如何创建自定义输入类型?

    例如 我想创建一个类似于 AngularJS 实现 电子邮件 的方式的自定义输入类型
  • 如何使用 $http.get 获取 304 状态代码?

    如何使用 http get 获取 304 状态代码 http get menu json success function data status headers scope menu data console log status sho
  • 在 AngularJs 中动态更改按钮文本

    我正在使用 AngularJS CSS 和 HTML 这就是我想做的 根据某个函数的输出禁用按钮isPublished 我需要将鼠标悬停在按钮上 就像禁用按钮时 将鼠标悬停在文本上可能是 I m disabled 当它没有被禁用时 悬停在文
  • 为什么在这个函数定义中像这样使用“window.angular”?

    我正在尝试理解一个我需要用来与 Django 集成的 angularjs 文件 它有一个我不熟悉的奇怪语法 请记住我是一名初级开发人员 所以这可能是你的面包和黄油 它是这样的 function angular undefined use s
  • 选择器的内部文本

    我尝试从此标记中获取内部文本 span class ng binding ng scope Displaying results 1 25 of 17 430 span 使用此选择器 document querySelectorAll di
  • 在 History popstate 事件中获取 AngularJs $scope?

    我是 angularjs 开发新手 我有 var app angular module myapp app controller ProductCtrl scope sce function scope sce scope products
  • AngularJS 插值错误

    我正在显示房间的属性 作为我正在开发的房间管理应用程序的一部分 这是输出 如您所见 Beamer 英文投影仪 的值为 Sony lamp 01 12 2013 此输出是正确的 但当我打开控制台时 我看到一些有关插值的错误 更大的分辨率 Ca
  • Angular 1.0.8 $resource 具有多个可选的获取参数

    我的学生 url 如下所示 var Student resource app student studentid courseId studentid id courseId cid 当我不带参数调用它时 我希望 url 为 app stu
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 从指令动态地将角度属性添加到元素

    我正在尝试构建一个指令来更改缓慢的 ajax 调用按钮上的加载状态 基本上 这个想法是为按钮元素设置一个属性 ng loading 并让指令添加其余的内容 这是html代码
  • Angular UI 模式的范围问题

    我无法理解 使用角度 UI 模式的范围 虽然这里不是很明显 但我已经正确设置了模块和所有内容 据我所知 但这些代码示例尤其是我发现错误的地方 index html 其中重要部分 div class btn group div
  • 如何在量角器中模拟拖放动作?

    我有一个双滑块 我想测试它是否可操作并返回正确的数据 滑块有一个最小和一个最大处理程序 它还有一些 我可以挂钩的断点 我想要模拟的是 handler max 元素的 touchStart 将拇指移动到类为 step 3 的元素上 handl
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele

随机推荐

  • 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