将给定的状态显示为角度js中的模态视图和普通视图

时间:2022-06-01 12:43:43

I am new to AngularJs and I am trying to implement this unique scenario and facing a design challenge.

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

I have created a menu nav bar in my app with the help of UI router.
Lets say there are 3 states in my application as represented.

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

将给定的状态显示为角度js中的模态视图和普通视图

The challenge is that I want to display state C as a modal or as a normal view depending upon how it is being navigated to.
If state C is navigated from the menu, I want to display it as a modal.
If state C is navigated from a specific point in the app, it has to be displayed as a normal view with some additional elements.

我的挑战是,我想要将状态C显示为一个模态视图,或者是一个普通视图,这取决于它是如何被导航到的。如果状态C从菜单中导航,我想将它显示为一个模态。如果从应用程序的特定点导航状态C,则必须将其显示为带有一些附加元素的普通视图。

I am trying to use just a single template and a controller for both modal and the regular view.
I am using $modal service provided by angular ui bootstrap.
I would like to add that state C has a UI grid which gets its data populated from a rest service.

我正在尝试为模态视图和常规视图使用一个模板和一个控制器。我正在使用角ui引导程序提供的$modal服务。我想补充的是,state C有一个UI网格,它的数据来自rest服务。

I have tried things like using non url params in state, or using resolve to pass param to modal and using a separate controller for modal but do not know if it is the right approach without causing code redundancy.

我尝试过使用非url解析器,或使用resolve将解析器传递给modal,并使用单独的控制器进行modal,但不知道这样做是否正确,而不会造成代码冗余。

I would appreciate if anyone can point me in the right direction.
I would love to post the code, but at this point I see it more as a design problem.

如果有人能给我指出正确的方向,我将不胜感激。我很乐意发布代码,但在这一点上,我认为它更像是一个设计问题。

1 个解决方案

#1


2  

why not just create a html partial - which is your template, and reference it from both ui-router as templatePath and from the $modal as described here http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service.

为什么不只是创建一个html部分——这是您的模板,并从ui-router作为templatePath,从$modal中引用它,如http://weblogs.asp.net/dwahlin/buildingangularjs-modal -service。

I think however that the right approach is to create a custom directive - representing the content of tab3 or the modal. Directives are angular's way of reusing and encapsulating code. Once you have that directive - that is, let's say it is called then referencing it from ng-view is simple. The template (no need for templatePath) just becoms: and also the same when referenced from $modal.

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

Hope that helps.

希望有帮助。

#1


2  

why not just create a html partial - which is your template, and reference it from both ui-router as templatePath and from the $modal as described here http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service.

为什么不只是创建一个html部分——这是您的模板,并从ui-router作为templatePath,从$modal中引用它,如http://weblogs.asp.net/dwahlin/buildingangularjs-modal -service。

I think however that the right approach is to create a custom directive - representing the content of tab3 or the modal. Directives are angular's way of reusing and encapsulating code. Once you have that directive - that is, let's say it is called then referencing it from ng-view is simple. The template (no need for templatePath) just becoms: and also the same when referenced from $modal.

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

Hope that helps.

希望有帮助。