Create custom input directive in angular

Question

I would like to create a custom input that looks like that:

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

my-input should receive any property that regular input can get (like placeholder and etc...).

the output should be like this (myInputTemplate.html):

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

I created a directive:

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

});

the ng-model is bindded ok now, my question is: How can I pass the attributes (like placeholder and etc) from my-input to the inside input?

I think that I approached it the wrong way, maybe I need to do it like that:

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

and to wrap the input with:

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

Kalhan · Accepted Answer · 2015-01-06 12:03:10Z

2

directive call should be like

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

note the placeholder="'Enter text'" Enter text with in quotes ('), this indicate these values are string so angular will not search for scope variable.

and in the directive

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

and the template

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

here is the demo Plunker

edited Jan 6, 2015 at 12:03

answered Jan 6, 2015 at 11:20

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shlomi Aharoni Over a year ago

thanks for the quick response, but "placeholder" was just an example, today is "placeholder" tomorrow it will be another attribute, can I make it generic?

Kalhan Over a year ago

then you need to add that attribute as above :)

Shlomi Aharoni Over a year ago

I think that I approached it the wrong way, maybe I need to do it like that: <input my-input ng-model="aScopeProperty" placeholder="Enter text" data-title="This is my title"></input> and to wrap the input with: <div class="my-input"> {{title}} <here will be the original input> </div>

Kalhan Over a year ago

then what is the different between these 2 ?

Shlomi Aharoni Over a year ago

I edited my question... the difference is that in the second approach I wrap the original input. in the first I created new input in the directive...

Community · Accepted Answer · 2017-05-23 10:28:27Z

0

You can use ng-attr as the following:

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

And send placeholder as attribute in your scope as the following:

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

I recommend to read about ng-attr-attrName, and this useful answer.

Dynamic attributes

Read my question, and accepted answer.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 6, 2015 at 11:23

Mohamed Yakout

3,0681 gold badge32 silver badges48 bronze badges

2 Comments

Shlomi Aharoni Over a year ago

thanks for the quick response, but "placeholder" was just an example, today is "placeholder" tomorrow it will be another attribute, can I make it generic? that all the attributes will go to the input?

Mohamed Yakout Over a year ago

@ShlomiAharoni I updated my answer, I asked your question but with another way :)

Shlomi Aharoni · Accepted Answer · 2015-01-07 07:53:42Z

The second approach succeeded!

final code:

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

The Directive:

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);
        }
    },
}

});

I even created my first Plunker for it, unfortunately, the Plunker don't works because it doesn't recognize: insertBefore and appendTo

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

Collectives™ on Stack Overflow

Create custom input directive in angular

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related