0

我有一个输入字段的指令，它使用嵌入来获取包含在包含ng-model属性的指令元素中的元素。在阅读了无数的 SO 问题和 Angular 文档以了解如何ng-model在嵌入的 html 中与ng-model我的指令同步后，我终于偶然发现了一个让它工作的技巧。$parent那就是使用ng-model输入字段内的位置。这一切都很好而且很花哨，但是，它看起来很笨拙/笨拙。

Plunker 显示在这里： http ://plnkr.co/edit/gEje6Z2uuTs9DFPeCZfv

我试图通过在我的链接函数中搞乱嵌入函数来使它更优雅一点，如下所示：

```

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

有人会认为嵌入函数将允许您用指令的范围覆盖嵌入范围，然后ng-model属性将关联并绑定到指令范围，但事实并非如此。

虽然，$parent.<ng-model>确实有效，但它看起来非常h​​ackish，并且可能导致错误，例如如果我的指令未与account未定义对象的父范围一起使用。

4

1 回答 1

1

有几种方法可以做到这一点。

1）使用暴露account变量=

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实际上用相似的值装饰每个作用域，$index就像你想用 . 装饰你的作用域一样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>
于 2015-03-17T19:59:30.357 回答