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

这里要注意两件事：

1）需要使用ngModel。

2）不要像你现在使用的那样在隔离范围内使用ngModel，因为角度可能会因为密钥混淆而使用有意义的名称，如下所示。

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

请参阅plunk。

在指令模板

1 个答案: