javascript - 在 Angular js 中将给定状态显示为模态视图和普通 View

标签 javascript angularjs modal-dialog angular-ui-router angular-ui

我是 AngularJs 的新手,我正在尝试实现这个独特的场景并面临设计挑战。

我在 UI 路由器的帮助下在我的应用程序中创建了一个菜单导航栏。
假设我的应用程序中有 3 个状态。

enter image description here

挑战是我想将状态 C 显示为模式或普通 View ,具体取决于它的导航方式。
如果从菜单导航状态 C,我想将其显示为模态。
如果状态 C 从应用程序中的特定点导航,则必须将其显示为带有一些附加元素的普通 View 。

我尝试仅对模态视图和常规 View 使用单个模板和 Controller 。
我正在使用 Angular ui Bootstrap 提供的 $modal 服务。
我想补充一点,状态 C 有一个 UI 网格,它从休息服务中填充数据。

我尝试过在状态中使用非 url 参数,或者使用解析将参数传递给模态并使用单独的模态 Controller ,但不知道这是否是正确的方法,不会导致代码冗余。

如果有人能指出我正确的方向,我将不胜感激。
我很想发布代码,但目前我认为它更多是一个设计问题。

最佳答案

为什么不直接创建一个 html 部分 - 这是您的模板,并从 ui-router 作为 templatePath 和 $modal 引用它,如下所述 http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service .

但是我认为正确的方法是创建一个自定义指令 - 表示 tab3 或模式的内容。指令是 Angular 重用和封装代码的方式。一旦你有了这个指令——也就是说,假设它被调用,那么从 ng-view 引用它就很简单了。模板(不需要 templatePath)就变成: 并且从 $modal 引用时也一样。

希望有帮助。

关于javascript - 在 Angular js 中将给定状态显示为模态视图和普通 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35810721/

相关文章:

android - 我在对话框 fragment 内单击按钮后,应用程序立即崩溃

HTML5 CSS3 模态窗口,点击外部关闭

javascript - 递归ajax调用不执行脚本包括在递归之间

javascript - 使用 angularjs 从多个级别的 html 和模型中删除项目

java - Jersey 应用程序 - 415 不支持的媒体类型

javascript - 为 Angular JS 启用 html 5 模式会抛出 JS 错误 : Failed to instantiate module due to: TypeError: Cannot read property 'html5Mode' of undefined

javascript - 设置下一个 div 的高度

javascript - React 如何向现有状态添加新的动态键?

javascript - 如何使用 Leaflet 中的切换按钮过滤 geojson?

reactjs - 使用 ReactDOM createPortal 制作 React-transition-group 动画