將給定的狀態顯示為角度js中的模態視圖和普通視圖

[英]Displaying a given state both as a modal and a normal view in angular js


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中創建了一個菜單導航條。假設我的應用程序中有三個狀態。

enter image description here

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.

希望有幫助。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/03/05/712ba215cfe6d89a65124d100875de54.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com