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 回答