AngularJS：如何进行交互并具有隔离范围和父范围？

Question

我有一种模式，其中许多项目类型是“可编辑的”。 这意味着我有很多模板（每种可编辑项类型一个），它们希望具有唯一的字段，但是具有共同的功能（编辑，保存，取消编辑，删除等）。 这些通用功能导致控制器上的大量重复： save ， edit ， cancel等，以及非常重复的错误处理。

我处理此问题的一种方法是让每个控制器“装饰”自己（使用服务），但是它也很混乱。

我更喜欢一个指令，例如“可编辑”：

<form name="editGroup" editable>
   <div ng-show="editMode">
    <!-- lots of fields, e.g. -->
    <input type="text" ng-model="name"></input>
    <span ng-show="editGroup.name.$error.required">The name is required</span>

    <button type="submit" ng-click="save()">Save</button>
    <button ng-click="cancel">Cancel</button>
   </div>
   <div ng-show="!editMode">
    <!-- lots of text, e.g. -->
    <span>{{name}}</span>

    <button ng-click="edit()">Edit</button>
    <button ng-click="delete()">Delete</button>
   </div>
</form>

问题在于，所有模型都来自控制器作用域，因为它们是此模板唯一的，而重复作用域项（如功能save() cancel() edit() delete()都来自指令隔离作用域） 。

我是混合示波器，当然，我无法事先知道需要哪些项目。 因此，如果我包含以下内容：

• 隔离范围：我无法访问已包含元素中的控制器模型以及验证表单
• 控制器作用域（默认）：我无法从指令访问附加功能，这首先是指令的要点！

我在这里做错了； 什么是更好（更清洁？）的方法呢？

Answer 1

通过避开ng-transclude并在链接函数中进行自己的包含，我设法弄清了这一点。

以下是正常ng-transclude的等效项：

link: function (scope,element,attrs,ctrlr,transclude) {
   var sc = scope.$parent.$new();
   transclude(sc,function(clone,scope) {
      element.append(clone); // or however else you want to manipulate the DOM
   });
}

通过将功能直接添加到跨子级作用域中，我可以使所有工作正常进行，而不会弄乱父级作用域，而这实际上是我不想做的。

link: function (scope,element,attrs,ctrlr,transclude) {
   var sc = scope.$parent.$new();
   sc.editMode = false;
   sc.save = function() {
   };
   sc.edit = function () {
     sc.editMode = true;
   };
   // etc.
   transclude(sc,function(clone,scope) {
      element.append(clone); // or however else you want to manipulate the DOM
   });
}

两全其美！