ディレクティブテンプレート内にng-modelとclassプロパティを設定する

Question

HTMLページをより細くするための簡単な指示文を作成しようとしています。私は、ディレクティブテンプレートにプロパティを渡し、プロパティを設定したいと思います。

問題は、文字列を渡してng-modelプロパティとクラスプロパティをテンプレートに設定しようとしているときです。他のすべてのプロパティは、うまく動作しません。そのクラスとng-modelプロパティはうまく動作しません。 テンプレートに文字列を渡すだけで、ng-modelとclassプロパティを設定するにはどうすればよいですか？

コントローラ：

angular.module('app.sst').directive('inputDirective', function() { 
return { 
    scope: { 
     colWidth: '@', 
     label: '@', 
     type: '@', 
     name: '@', 
     ngModel: '=' 
    }, 
    templateUrl: 'components/blocks/directives/inputTemplate.html', 
}; 
}); 

ディレクティブテンプレート：

<div class="{{colWidth}}"> 
    <label>{{label}}</label> 
    <div class="field"> 
     <input type="{{type}}" 
       name="{{name}}" 
       ng-model="ngModel" 
       class="form-control inputText" /> 
    </div> 
</div> 

インデックス：

<div input-directive 
      colWidth="col-md-4" 
      label="Proceded by" 
      type="text" 
      name="procededBy" 
      ng-model="vm.SSTItem.procededBy"> 
</div> 

Answer 1

2つのことトンoここに注意してください：

1）ngModelが必要です。

2）ngModelを隔離された範囲で使用しないでください。角度として使用しているように、以下のように意味のある名前を使用してください。

angular.module('app', []) 
    .directive('inputDirective', function(){ 
    return { 
     required: '^ngModel', 
     scope: { 
      modelName: "=ngModel" 
     }, 
     template: '<input type="text" ng-model="modelName">' 
    }; 
}) 

plunkを参照してください。