Question

我有一个AngularJS应用程序，我认为它基本上非常典型（类似于许多示例）。

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

我设置了一个$routeProvider，其中包含大量when个来将用户定向到视图（带控制器的模板部分），例如：

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

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

现在，让我说我有一个“事件”的观点。它有一个具有“事件”属性的表单。（您可以更改表单中的值和“保存”，这是此处的重点。）我有以下要求：

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

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

编辑：详细说明：我对目前为止所见过的ng-include个想法感到不满意，因为：

如果我不仅仅有一种嵌入的视图，那么它们会有很多。他们都会在没有充分理由的情况下被装满。矫枉过正
我不知道如何参数化嵌入式视图的方式与我从$routeParams

$routeProvider

我对父母和子女之间的分享太多感到不舒服
我无法为后续的“添加”

Answer 1

我会尝试用ng-include

解决您的问题

如果我不仅仅是一种，那么会有很多嵌入的观点。他们都会在被展示之前被装满没有充分的理由;矫枉过正

ng-if可以在这里帮到你。在该条件成立之前，该指令不会加载DOM。当条件变为假时，它也会破坏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为您做到这一点。

Answer 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>

嵌入AngularJS视图

2 个答案: