嵌入AngularJS视图

发布时间：2020-12-17 07:07:33 所属栏目：安全来源：网络整理

导读：我有一个AngularJS应用程序,我认为它基本上是非常典型的(类似于许多示例). html ng-app="myApp" ...body... div class="main" ng-view/div ... 有一个$routeProvider,我设置了大量的时间来引导用户到一个视图(模板部分与控制器),如： $routeProvider.when('/

我有一个AngularJS应用程序,我认为它基本上是非常典型的(类似于许多示例).

<html ng-app="myApp" ...
<body>
...
    <div class="main" ng-view></div>
    ...

有一个$routeProvider,我设置了大量的时间来引导用户到一个视图(模板部分与控制器),如：

$routeProvider.when('/incident/:identifier',{templateUrl:'incident.html',controller:"IncidentCtrl"});

这一切都很好.用户可以在视图之间来回切换.

现在,让我们说我有一个“事件”的观点.它有一个具有“事件”属性的表单. (您可以更改表单中的值和“保存”,这不是这里的要点.)我有以下要求：

>现有表格下方的“添加工单”按钮
>单击按钮时,将在现有表单下方加载表单(部分)以输入新“工作单”的详细信息
>“保存”按钮作为加载表单(部分)的一部分将保存新的“工单”
>表格(部分)被关闭,卸载或至少在视觉上被移除
>可能会回到2.重复(添加后续的“工作单”)

对于在现有表单下面加载的表单,我想重用现有模板partial及其后续控制器,我已经将其用于其他地方的顶级ng-view.但是,我走了几条道路来实现这一点无济于事; ng-include似乎不起作用,因为它非常静态,并且不允许嵌入式元素的大部分生命周期.此外,似乎很难动态加载它,这意味着它将在点击“添加工单”按钮之前加载.有人能指出我可行的策略吗？显然,我的目标是促进现有模板部分和控制器的重用,而不必总是让用户在视图之间移动.非常感激.

编辑：详细说明：我对目前为止所见过的任何包含的想法感到不满意,因为：

>如果我不仅仅有一种嵌入的视图,那么会有很多.他们都会在没有充分理由的情况下被装满.矫枉过正
>我不知道如何参数化嵌入视图的方式与从$routeProvider传递$routeParams的方式相同
>我对父母和孩子范围之间过多分享感到不舒服
>我无法干净地为后续的“添加”重新创建控制器

解决方法

我会尝试用ng-include解决你的问题

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

ng-if可以帮助你.在该条件成立之前,该指令不会加载DOM.当条件变为假时,它也会破坏DOM.所以像

<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

在加载视图时,可以使用ng-init传递一些参数.检查文档

I am uncomfortable of too much sharing between parent and child scopes

ng-init可以再次提供帮助.您可以在子范围上创建属性,并在ng-init中将父范围值传递给它

I have no way to cleanly recreate the controller for subsequent “adds”

ng-if为你做这件事.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!