嵌入AngularJS查看 [英] Embedding AngularJS view
问题描述
我有，我相信一个AngularJS应用程序本质上是pretty典型的（许多相似的例子）。
＆LT; HTML NG-应用=对myApp...
＆LT;身体GT;
...
＆LT; DIV CLASS =主NG-视图＆gt;＆LT; / DIV＆GT;
...
有一个 $ routeProvider ，我已经设置了一大堆的在 s到直接用户的图（模板与控制器局部的），如：
$ routeProvider.when（'/事件/：标识符'，{templateUrl：incident.html'，控制器：IncidentCtrl}）;
这是所有工作的罚款。用户可以来回视图之间。
现在，让我们说我有一个事件视图。它与事件的性质的形式。 （您可以在形式转变价值观和保存，这是除了点这里）。我有以下要求：
- 添加工作规程按钮的存在形式如下
- 当单击按钮，表格（部分）被加载的存在形式下面，为新的工作单中输入详细信息
- 保存按钮，加载的形式（部分）的一部分，将保存新的工作规程
- 的形式（部分）被关闭，卸载或至少在视觉上移除
- 可能回到2重复（添加随后的工作单）
有关加载的存在形式下面的表格，我想重新使用现有的模板部分，其随后的控制器，我已经使用了顶级 NG-视图在别处。但是我已经下了几路在仍没落实这一点; NG-包括好像不行，因为它是pretty静态的，不允许为许多嵌入式元件上的生命周期。此外，它似乎很难动态地加载它，这意味着添加工作规程按钮被点击过之前它会被加载。可能有人点我一个可行的策略是什么？显然，我的目标是促进现有的模板部分和控制器的再利用，而不总是有用户视图之间移动。大部分AP preciated。
编辑：诠：我不开心（还）与任何是我到目前为止看到的，因为NG-包括思路：
- 会有他们的一帮，如果我有不只是一个单一的一种观点嵌入更多。他们将所有被装载的带出没有很好的理由进取;矫枉过正
- 我不知道如何参数以同样的方式嵌入的意见我可以通过
$ routeParams从$ routeProvider - 我难受的父母和孩子之间的范围太大共享
- 我没有办法重新干净控制器随后补充说：
我会尝试用来解决您的问题NG-包括
会有一群人，如果我不只是一个单一的一种更
的角度去嵌入。他们将所有被装载的带出未来
没有充分的理由;矫枉过正
NG-如果可以帮助你在这里。直到条件为真该指令将不会加载DOM。而当条件为假，也破坏了DOM。因此，像＆LT; DIV NG-IF ='conditionwhenthepartialshouldbeshown'＆GT;
＆LT; NG-包括SRC ='TEMPLATENAME'NG-的init =模式= parent.someProperty'/＆GT;
＆LT; / DIV＆GT;
我不知道如何参数以同样的方式嵌入我的看法
可以通过$ routeParams从$ routeProvider您可以使用
NG-INIT的视图加载时传递一些参数。检查文档
我不舒服
父母和孩子之间的范围太大共享
NG-INIT可以再次有所帮助。您可以创建儿童范围的属性，并传递它NG-初始化父范围值
我没有办法重新干净控制器随后补充说：
NG-如果这是否适合你。I have an AngularJS application that I believe is essentially pretty typical (alike many of the examples).
<html ng-app="myApp" ... <body> ... <div class="main" ng-view></div> ...There's a
$routeProviderthat I've set up with a whole lot ofwhens to direct users to a view (template partial with a controller), such as:$routeProvider.when('/incident/:identifier', {templateUrl:'incident.html', controller:"IncidentCtrl"});This is all working fine. Users can go back and forth between views.
Now, let's say I have a view for an "incident". It has a form with properties of the "incident". (You can change values in the form and "Save", which is besides the point here.) I have the following requirements:
- "Add work order" button below the existing form
- When button clicked, a form (partial) is loaded below the existing form to enter details for a new "work order"
- "Save" button as part of the loaded form (partial) will save the new "work order"
- The form (partial) is closed, unloaded or at least visually removed
- Possibly go back to 2. to repeat (to add subsequent "work orders")
For the form that is loaded below the existing form I would like to reuse an existing template partial with its subsequent controller, which I'm already using for the top-level
ng-viewelsewhere. But I've gone down a few roads to implement this at no avail;ng-includeseems to not work, as it is pretty static and does not allow for much of a lifecycle on the embedded element. Also, it seems hard to load it dynamically, which means it's gonna be loaded before the "Add work order" button is ever clicked. Could someone point me to a workable strategy? Clearly my goal is to promote reuse of existing template partial and controller, without always having the user to move between views. Much appreciated.
Edit: elaborating: I'm not happy (yet) with any
ng-includeideas that I've seen so far, since:
- There would be a bunch of them if I had more than just a single kind of view to embed. They would all get loaded ahead of being shown for no good reason; overkill
- I do not know how to parameterize the embedded views in the same way I can pass
$routeParamsfrom the$routeProvider- I am uncomfortable of too much sharing between parent and child scopes
- I have no way to cleanly recreate the controller for subsequent "adds"
解决方案I would try to address your concerns with
ng-includeThere would be a bunch of them if I had more than just a single kind of view to embed. They would all get loaded ahead of being shown for no good reason; overkill
ng-ifcan help you here. This directive would not load DOM till the condition becomes true. And it also destroys the DOM when the condition becomes false. So something like<div ng-if='conditionwhenthepartialshouldbeshown'> <ng-include src='templateName' ng-init='model=parent.someProperty'/> </div>
I do not know how to parameterize the embedded views in the same way I can pass $routeParams from the $routeProvider
You can use
ng-initfor passing some parameters when the view is loaded. Check documentationI am uncomfortable of too much sharing between parent and child scopes
ng-initcan help here again. You can create a property on child scope and pass it the parent scope value inng-initI have no way to cleanly recreate the controller for subsequent "adds"
ng-ifdoes this for you.这篇关于嵌入AngularJS查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
