ngModel需要在Transcluded HTML $父时 [英] ngModel needs $parent when within Transcluded html

问题描述

我有用于使用transclusion采取被封闭在指示元件，它包括一个纳克模型属性的元素的输入字段的指示。阅人无数SO问题和角度文件之后，了解如何获得 NG-模型在transcluded HTML与 NG-模型在我的指导，我终于迷迷糊糊偶然发现了一招，得到它的工作。这是使用 $父其中 NG-模型是输入字段中。这是所有罚款和花花公子，但是，它似乎笨重/ hackish的。

I have a directive for a input field that uses transclusion to take the elements that are enclosed in the directives element which includes an ng-model attribute. After reading countless SO questions and Angular documentation to find out how to get the ng-model in the transcluded html to sync with the ng-model in my directive I finally stumbled stumbled upon a trick to get it to work. That is to use $parent where the ng-model is within the input field. This is all fine and dandy, however, it seems clunky/hackish.

Plunker如下所示：
http://plnkr.co/edit/gEje6Z2uuTs9DFPeCZfv

Plunker shown here: http://plnkr.co/edit/gEje6Z2uuTs9DFPeCZfv

我试图通过我的链接函数内的transclusion功能乱搞像这样使这一点更优雅的：

I tried to make this a little more elegant by messing around with the transclusion function within my link function like so:

```

      var transcludedContent, transclusionScope;

      transcludeFn(scope, function(clone, scope) {
        //headerCtrl.$element.append(clone);
        transcludedContent = clone;
        transclusionScope = scope;

        console.log('scope form: ', scope);
        console.log('transclude form: ', clone);


      });

```

此外，在该Plunker所示：
http://plnkr.co/edit/11k9LiA5hyi4xydWBo3H?p=$p$pview

Also, shown in this Plunker: http://plnkr.co/edit/11k9LiA5hyi4xydWBo3H?p=preview

有人会认为transclusion功能将允许您覆盖与您的指令范围则的transclusion范围NG-模型属性将关联并绑定到指令范围，然而，这不是这种情况。

One would think that the transclusion function would allow you to overwrite the transclusion scope with the scope of your directive then the ng-model attributes would be associated and bound to the directives scope, however, this is not the case.

虽然，在 $父＆LT; NG-模型＆GT; 不工作，看起来很hackish的，而像如果我的指令，却并不具备使用可能会导致错误这并不父范围定义了对象的帐户。

Although, the $parent.<ng-model> does work, it seems very hackish, and can lead to bugs like if my directive was not used with a parent scope that doesnt have an account object defined.

推荐答案

有这样做的几种方法。

1）揭帐户使用变量 =

http://plnkr.co/edit/DxsipWRj0AJe6Yi3bhse

JS：

app.directive('formControl', [function(){
    return {
      restrict: 'EA',
      template: '<div ng-transclude></div>{{account.name}}',
      scope: {
        account: '='
      },
      transclude: true,
      link: function(scope, element, attrs){
        scope.account={};

        console.log('SCOPE: ', scope)
      }
    };
}]);

HTML

<form-control account='account'>
  <label for="name">Enter Name:</label>
  <input name="name" ng-model="account.name" \>
</form-control>

2）使用 transclude 功能：

这是类似于 ngIf 和 ngRepeat 做的。 ngRepeat 居然装饰与 $指数和类似的价值观，你想用<$来装饰你的范围，以同样的方式每范围C $ C>帐户。

This is similar to what ngIf and ngRepeat do. ngRepeat actually decorates every scope with $index and similar values, the same way you want to decorate your scope with account.

http://plnkr.co/edit/cZjWqIgO23nzc0kMZA57

JS：

app.directive('formControl', ['$animate', function($animate){
    return {
      restrict: 'EA',
      transclude: 'element',
      link: function(scope, element, attrs, ctrl, transclude){
        //this creates a new scope that inherits from the parent scope
        //that new scope will be what you'll be working with inside your
        //transcluded html
        transclude(function (clone, scope) {
          scope.account = {name:'foobar'};
          $animate.enter(clone, null, element);

          console.log('SCOPE: ', scope)
        });
      }
    };
}]);

HTML

<form-control>
  <label for="name">Enter Name:</label>
  <input name="name" ng-model="account.name" \><br>
  {{account.name}}
</form-control>

这篇关于ngModel需要在Transcluded HTML $父时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！