Question

我想创建一个看起来像这样的自定义输入：

<my-input ng-model="aScopeProperty" placeholder="Enter text" 
data-title="This is my title"></my-input>

my-input应该接收常规输入可以获得的任何属性（如占位符等等）。

输出应该是这样的（myInputTemplate.html）：

<div class="my-input">
    {{title}}           
    <input type="text" ng-model="text" />    
</div>

我创建了一个指令：

myApp.directive('myInput', function(){
     return {
        restrict: 'E',
        require: 'ngModel',
        templateUrl: '/myInput/myInputTemplate.html',
        replace: true,
        scope: {
            text: '=ngModel',
            title: '=title'
        },            
    }

}）;

ng-model现在绑定好了， 我的问题是：如何将my-input中的属性（如占位符等）传递给内部输入？

我认为我以错误的方式接近它，也许我需要这样做：

  <input my-input ng-model="aScopeProperty" placeholder="Enter text" 
   data-title="This is my title"></input>

并用以下内容包装输入：

 <div class="my-input">
    {{title}}  
    <here will be the original input> 
</div>

Answer 1

指令调用应该像

<my-input ng-model="aScopeProperty" placeholder="'Enter text'" title="'This is my title'"></my-input>

请注意placeholder="'Enter text'"中的Enter text quotes (')，这表示这些值是字符串，因此angular不会搜索scope变量。

并在指令

中

myApp.directive('myInput', function(){
   return {
      restrict: 'E',
      require: 'ngModel',
      templateUrl: '/myInput/myInputTemplate.html',
      replace: true,
      scope: {
          text: '=ngModel',
          title: '=title',
          placeholder : '=placeholder'
      },            
  }
});

和模板

<div class="my-input">
    {{title}}           
    <input type="text" ng-model="text" placeholder="{{ placeholder }}" />    
</div>

这是demo Plunker

Answer 2

您可以使用ng-attr作为以下内容：

<input type="text" ng-model="text" ng-attr-placeholder="{{placeholder}}"/>

并将占位符作为属性发送到您的范围中，如下所示：

scope: {
      text: '=ngModel',
      title: '=title',
      placeholder : '=placeholder'
  }

我建议您阅读ng-attr-attrName和useful answer。

动态属性

阅读我的question，并接受了答案。

Answer 3

第二种方法成功了！

最终代码：

<input my-input ng-model="aScopeProperty" placeholder="Enter text" 
data-title="This is my title">

指令：

app.directive('myInput', function () {
return {
    restrict: 'A',
    scope: {
        title: '=title'
    },
    link: function ($scope, $element) {
        var wrap = angular.element('<div class="my-input-wrapper" />');
        $element.addClass('form-control').removeAttr('my-input');
        wrap.insertBefore($element);
        $element.appendTo(wrap);
        if ($scope.title) {
            var title = angular.element('<span class="my-title">' + $scope.title + '</span>');
            title.appendTo(wrap);
        }
    },
}

}）;

我甚至创建了我的第一个Plunker，不幸的是，Plunker不能正常工作，因为它无法识别：insertBefore和appendTo

http://plnkr.co/edit/XnFM75vOBg4ifHUQzGOt?p=preview

以角度创建自定义输入指令

3 个答案: