Implementing function using custom directive in AngularJS

Question

I need help. I am learning how to create a custom directive. I am trying to implement a function using custom directive. I searched online but didn't find a suitable solution. My HTML code looks like :

<custom-search>
            <input type="text" ng-model="displayname" placeholder="Enter your name here" />
            <h1>Welcome {{displayname}}!!</h1>   
    </custom-search>

My JS file has custom directive as follows:

myApp.directive('customSearch', function () {

    return {

        restrict: "EA",

        template: "<b>Hello my directive</b>",
    }
});

I want to implement a function inside a custom directive so that I am not able to type further if the length of "displayname" reaches 60.

I have a logic as follows:

if ($scope.displayname.length > =60) {
                        if ($scope.displayname.length === 60) {
                            $scope.temp = $scope.displayname;
                            return;
                        }
                        if ($scope.displayname.length > 60) {
                            $scope.displayname = $scope.temp;
                            return;
                        }
                        return;
                    }
        }

why do you need directive when there exists maxlength for input's? ... <input maxlength="10"> And there is ng-maxlength — charlietfl
– charlietfl, Commented Jun 2, 2016 at 23:14
I have another code which looks like follows: <div input-control-model model="displayname" placeholder="Name"></div> I was told that "input-control-model" creates its own implementation and I am not able to use "maxlength" in div because of that custom directive. I was told that I need to implement the custom directive on top of that directive to restrict the length of displayname. So I was trying to implement custom directive starting from basic. — Ritesh Puri
– Ritesh Puri, Commented Jun 2, 2016 at 23:22

Vu Quyet · Accepted Answer · 2016-06-03 02:58:36Z

1

Write a directive function which has input param as fieldLimit which will be used to monitor. Set value of this input to your field: displayName. Add a limit number for it which will be used as limit of your input text.

Use watch to monitor on your input change.

app.directive('customSearch', function () {
return {
    restrict: "EA",
    scope : {
      fieldLimit: '='
    },
    link: function($scope, $element, $attr) {
      var limit = $attr.limit;
       $scope.$watch('fieldLimit',function(value){
         console.log('changed:' + value);
         if (value != null && value.length > limit)
         {
           $scope.fieldLimit = value.substring(0,limit);
         }
       })
    }
}
});

Then use it anywhere such as with a input text:

<div custom-search field-limit='displayName' limit='5'>
  <input type='input' ng-model='displayName'  />
</div>

Plunk example here: https://plnkr.co/edit/1S8yiu?p=preview

answered Jun 3, 2016 at 2:58

Vu Quyet

1,7051 gold badge16 silver badges22 bronze badges

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

3 Comments

Ritesh Puri Over a year ago

Thanks a lot!! It worked!! Can you explain me the following code you used scope : { fieldLimit: '=' },

Vu Quyet Over a year ago

You can think about your directive as a box and we need to define input/output for your box . That is responsibility of {fieldLimit : '='}. '=' mean that it is two way binding. It will get data value outside of box and push it inside to used. When fieldLimit is changed in your box, it also effect to the outside. Read more here for scope and directive option docs.angularjs.org/api/ng/service/$compile

Ritesh Puri Over a year ago

I got it now. Thanks for your explanation!!

Collectives™ on Stack Overflow

Implementing function using custom directive in AngularJS

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related