如何在生成的標籤指令中使用ng-model使綁定工作？

Question

我正在創建一個指令，它根據哪種類型進入而動態生成標記。 但是在這種情況下，我無法使ng-model正常工作。

1）HTML：ng-repeat重複custom-tag並綁定data（自定義標籤可能是input或select）

<div ng-repeat="item in head"> 
 
    <div ng-repeat="(key, value) in data" ng-if="key === item.name"> 
 
    <label>{{item.title}}</label> 
 

 
    <custom-tag type="item.type" ng-model="data[key]"></custom-tag> 
 

 
    </div> 
 
</div> 
 
{{data}} // {"name":"0","number":"0","contact":"0","type":"0","id":8}

這是我的指令代碼： 此自定義指令創建一個custom tag，例如它的'input'，然後我添加一個屬性ng-model，但在哪裏得到的參考模型我找不到。我嘗試了很多不同的方法。 ，並在結束時，我與新創建input標籤

.directive('customTag', function($compile, $parse) { 
 
    
 
    return { 
 
    scope: { 
 
     type: "=" 
 
    }, 
 
    require: '^ngModel', 
 
    restrict: 'E', 
 
    replace: true, 
 
    link: function($scope, el, attr, ngModel) { 
 

 
     var input = angular.element('<input/>'); 
 
      input.attr('ng-model', 'what/s here is going to be???') 
 

 
     var linkFn = $compile(input); 
 
     var content = linkFn($scope); 
 
     el.replaceWith(content); 
 

 
    } 
 
    } 
 
})

我應該通過在NG-模型值，使其工作更換custom tag？

它的工作沒有隔離作用域，但我需要它來接收元素的類型。

對不起，我的英文和難解釋。

Answer 1

您可以通過ngModel額外的結合：

.directive('customTag', function($compile, $parse) { 
    return { 
     scope: { 
      model: '=ngModel', 
      type: "@" 
     }, 
     require: 'ngModel', 
     restrict: 'E', 
     replace: true, 
     link: function($scope, el, attr, ngModel) { 
      var input = angular.element('<input type="text" ng-model="model" />'); 
      var linkFn = $compile(input); 
      var content = linkFn($scope); 
      el.replaceWith(content); 
     } 
    } 
}); 

，並確保你插值類型，你不需要雙向綁定在這裏：

<custom-tag type="{{item.type}}" ng-model="data[key]"></custom-tag>