个人中心
gpt4 book ai didi

angularjs - 嵌入 AngularJS View

转载 作者：行者123 更新时间：2023-12-03 09:30:50 28 4
gpt4 key购买 nike

我有一个 AngularJS 应用程序，我认为它本质上非常典型(与许多示例一样)。

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

有一个 $routeProvider 我已经设置了很多 when 来将用户引导到一个 View (带有 Controller 的部分模板)，例如:

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

一切正常。用户可以在 View 之间来回切换。

现在，假设我有一个“事件”的 View 。它有一个带有“事件”属性的表格。 (您可以更改表单中的值并“保存”，这不是这里的重点。)我有以下要求:

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

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

编辑:阐述:我对目前为止看到的任何 ng-include 想法都不满意，因为:

  • 如果我要嵌入的不仅仅是一种 View ，就会有很多这样的 View 。他们都会无缘无故地在展示之前就被加载；矫枉过正
  • 我不知道如何以从 $routeProvider 传递 $routeParams 的相同方式参数化嵌入 View
  • 我对父作用域和子作用域之间共享太多感到不舒服
  • 我无法为后续的“添加”干净地重新创建 Controller

最佳答案

我会尝试用 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 在加载 View 时传递一些参数。检查文档

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 会为您完成此操作。

关于angularjs - 嵌入 AngularJS View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18987149/

28 4 0
文章推荐： licensing - 开源，非商业许可？
文章推荐： cassandra - "DROP TABLE IF EXISTS"在 Cassandra 中如何工作？
文章推荐： mercurial - hg 命令在 hg fetch 之前查看变更集
文章推荐： wpf - MultiDataTrigger 与具有多重绑定(bind)的 DataTrigger
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com