3

我有一个 AngularJS 应用程序，我认为它本质上是非常典型的（就像许多示例一样）。

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

$routeProvider我已经设置了很多swhen来将用户引导到视图（带有控制器的模板部分），例如：

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

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

现在，假设我对“事件”有一个看法。它具有具有“事件”属性的形式。（您可以更改表单和“保存”中的值，这不是这里的重点。）我有以下要求：

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

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

ng-include编辑：详细说明：我对迄今为止看到的任何想法都不满意，因为：

  • 如果我要嵌入的不仅仅是一种视图，就会有很多这样的视图。他们都会在没有充分理由的情况下被加载。矫枉过正
  • 我不知道如何以与$routeParams从$routeProvider
  • 我对父子范围之间的过多共享感到不舒服
  • 我无法为后续的“添加”干净地重新创建控制器
4

2 回答 2

5

我会尝试解决您的疑虑ng-include

如果我要嵌入的不仅仅是一种视图，就会有很多这样的视图。他们都会在没有充分理由的情况下被加载。矫枉过正

ng-if可以在这里帮助你。在条件变为真之前，该指令不会加载 DOM。当条件变为 false 时，它​​也会破坏 DOM。所以像

    <div ng-if='conditionwhenthepartialshouldbeshown'>
      <ng-include src='templateName'  ng-init='model=parent.someProperty'/>
    </div>

我不知道如何以与从 $routeProvider 传递 $routeParams 相同的方式参数化嵌入式视图

您可以ng-init用于在加载视图时传递一些参数。检查文档

我对父子范围之间的过多共享感到不舒服

ng-init可以再次在这里提供帮助。您可以在子范围上创建一个属性并将其传递给父范围值ng-init

我无法为后续的“添加”干净地重新创建控制器

ng-if为你做这个。

于 2013-09-25T07:15:34.643 回答
2

我发现重现此行为的方法是使用两个控制器：一个用于“主”视图，一个用于局部视图。

在您的控制器文件中

var controllers = angular.module('controllers', []);

controllers.controller('IncidentCtrl', ['$scope', function($scope) {
    // Incident Ctrl Body
    $scope.showForm = false;
    $scope.toggleForm = function() {
        $scope.showForm = !$scope.showForm;
    }
}]);

controllers.controller('WorkOrderCtrl', ['$scope', function($scope) {
    // Partial Form controller
    // This controller can talk with $scope from IncidentCtrl 
    //    using the $scope.$parent.$parent

    $scope.save = function() {
        // ...
        $scope.$parent.$parent.showForm = false;
    }
}]);

以及您的观点：

<!-- incident.html -->
<button data-ng-click="toogleForm()"> Toggle Form </button>
<div data-ng-show="showForm">
    <div ng-include src="'path/to/_work_order.html'"></div>
</div>

<!-- _work_order.html -->
<div data-ng-controller="WorkOrderCtrl">
   <!-- view body -->
   <button data-ng-click="save()"> Save </button>
</div>
于 2013-09-24T20:09:42.713 回答