AngularJS：如何transclude，并且都隔离范围和父范围？ [英] AngularJS : How to transclude and have both isolate scope and parent scope?

问题描述

我有一个模式，其中许多项目类型为编辑。这意味着我有很多的模板（每个编辑项目类型）期望有独特的字段，但常用功能（编辑，保存，取消编辑，删除等）。这些通用功能导致大量的控制器上重复：保存，修改，取消等，也很重复的错误处理。

I have a pattern wherein many item types are "editable". This means that I have lots of templates (one for each editable item type) that expect to have unique fields, but common functions (edit, save, cancel edit, delete, etc.). These common functions lead to lots of repetition on controllers: save, edit, cancel, etc., and very repetitive error-handling.

我看着处理这个问题的方法之一是让每个控制器装饰自己（使用服务），但它得到杂乱的为好。

One way I looked at of dealing with this was to have each controller "decorate" itself (using a service), but it got messy as well.

我preFER指令，说，'编辑'：

I prefer a directive, say, 'editable':

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

问题是，所有的车型都来自于的控制器的范围，因为它们是唯一的此模板，而重复范围的项目，如功能保存（） 取消（） 编辑（） 删除（）都来自指令隔离范围。

The problem is that all of the models come from the controller scope, since they are unique to this template, while the repetitive scope items, like the functions save() cancel() edit() delete() all come from the directive isolate scope.

我，好，混合示波器，当然我也没有事先知道的方式什么物品需要可用。所以，如果我用transclude：

I am, well, mixing scopes, and of course I have no way of knowing in advance what items need to be available. So if I transclude with:

• 分离范围：我无法访问控制器车型在transcluded元素，以及用于验证的形式


• 控制器范围（默认）：我失去了进入加从指令，这是摆在首位的指令
点功能！

在这里，我做错了什么;什么是更好的（清洁？）的方式来做到这一点？

I am doing something wrong here; what is the better (cleaner?) way to do this?

推荐答案

我设法从回避NG-transclude 和做我自己transclusion在弄明白链接功能。

I managed to figure it out by shying away from ng-transclude and doing my own transclusion in the link function.

以下是正常的 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
   });
}

通过添加功能的直接的到transclude子范围，我能够拥有的一切工作，没有与父范围，我真的不想做搞乱。

By adding the functions directly onto the transclude child scope, I was able to have everything work, without messing with the parent scope, which I really didn't want to do.

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
   });
}

两全其美！

这篇关于AngularJS：如何transclude，并且都隔离范围和父范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！