Change HTML input field to label by defining custom angular directive

Question

I have lots of input, textarea and select on some pages (angular templates). I want to redefine "input" directive such that It will take a value like ViewMode = true from either localStorage and convert all inputs as label. If I change the ViewMode then on page refresh input should behave properly.

But I do not want to edit any input tag on any angular template.

Means I want to override input, textarea and select as my own angular directive.

I am not able to start. Where from should I start? (I have experience of custom directive with new name, but not with any exciting HTML tag name)

Note: I do not want to use readonly (with proper style) since it requires editing all input tag. Not only that I have custom directives with isolated scope, so I need to pass the ViewMode value to all custom directives. More over if user press CTRL+A content readonly field is not being selected.

I am looking for a solution kind of as follows

ViewButtonClickEvent () {
   set localStorage.viewMode = true;
   callExistingEditMethod();
}

EditButtonClickEvent () {
  set localStorage.viewMode = false;
  callExistingEditMethod();
}

editPagesModule.directive('input', {
    if(localStorage.viewMode != true)
     //Keep all existing functionality with ng-model
    }
    else {
      //replace input with span or label.
    }
})

Angular directive can not only be an element but also an attribute or class, right? Just make a directive as an attribute or class that can be added to <input>, <textarea> or <select> will that serve your purpose? — gm2008
– gm2008, Commented Dec 23, 2015 at 17:09
ng-readonly is there but I dont like to use it because I have to update all input tag. I want some centralize approch. So that I don't need to tuch any thing. — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Dec 24, 2015 at 7:51
Looks like you need 'in place edit' functionality. There are many examples over the Internet example (not mine). — xersiee
– xersiee, Commented Dec 28, 2015 at 11:29
Nice one. But it should not be with isolated scope. It should work with existing ng-model and others ng directive — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Dec 28, 2015 at 11:43

Community · Accepted Answer · 2016-09-21 12:02:50Z

3

+50

You could create directives called input, select and textarea, which would automatically be compiled without having to change your existing markup.

Working examples: JSFiddle & Plunker

It would look something like this:

angular.module('myApp', [])
  .directive('input', inputDirective)
  .directive('select', inputDirective)
  .directive('textarea', inputDirective)
  .factory('$editMode', editModeFactory)
;

inputDirective.$inject = ['$editMode'];
function inputDirective($editMode) {
  return {
    link: postLink
  };

  function postLink(scope, iElement, iAttr) {
    scope.$watch($editMode.get, function(edit) {
      if (iElement[0].nodeName === 'SELECT') {
        if (edit === 'true') iElement.removeAttr('disabled');
        else iElement.attr('disabled', true);
      }
      else {
        if (edit === 'true') iElement.removeAttr('readonly');
        else iElement.attr('readonly', true);
      }
    });
  }
}

editModeFactory.$inject = ['$window'];
function editModeFactory($window) {
  return {
    get: function() {
      return $window.localStorage.getItem('editMode');
    },
    set: function(value) {
      $window.localStorage.setItem('editMode', value);
    }
  };
}

I did use the readonly attribute (disabled for select), because the only other option I can think of would be to replace the entire input element with something like a div. You would also have to cache the original element, so you can restore it later...and doing that sort of thing would break your bindings so you'd have to recompile every input, every time. That just seems like a horrible idea.

edited Sep 21, 2016 at 12:02

CommunityBot

11 silver badge

answered Dec 29, 2015 at 5:48

Shaun Scovil

4,0075 gold badges45 silver badges59 bronze badges

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

4 Comments

Partha Sarathi Ghosh Over a year ago

Very nice approach. But I am not able to open jsfiddle from my workplace. So can you please clone it on plunker? One more thing some of my user will not have edit permission so I do not need to recompile to edit view. More over view mode and edit mode are completely different flow so we do not need to come back vice versa any time.

Shaun Scovil Over a year ago

I added a plunker to my answer. If you would prefer to change the inputs to divs, you might be able to do something like iElement.replaceWith('<div>' + iElement.val() + '</div>');, but you will lose any bindings, classes and other attribute values on the input (unless you explicitly add them to your html string).

Partha Sarathi Ghosh Over a year ago

Wow! that is great. I will try this and let you know what happens. Your plunker is blank URL here.

Shaun Scovil Over a year ago

Sorry, I fixed the link for plnkr.co: plnkr.co/edit/6a5X9aRA6IXRsd9ZUteP?p=preview

Collectives™ on Stack Overflow

Change HTML input field to label by defining custom angular directive

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related