AngularJS - Add attribute at runtime

Question

I'm working on an AngularJS app. I'm trying to add the autofocus attribute to an element at runtime. The reason I want to do this is so I can set this attribute on one of several elements. How do you add an HTML attribute to an element via an AngularJS directive?

Thank you!

I see that. However, I don't like this approach. In my opinion it dirtys up the $scope. With this approach, I have to have a variable for each control. I'm trying to create a directive that allows me to give the ID of a control at the form level. I will then find that control and I'd like to set the autofocus attribute on that control. — user70192
– user70192, Commented Jun 27, 2014 at 14:07
firstly, what the reason to add autofocus to several elements? Do you want to add it by elements's id or by some jQuery selector? — IUnknown
– IUnknown, Commented Jun 27, 2014 at 14:42
I do NOT want several elements to have autofocus. Instead, I want to find an element within the form element and add autofocus to that element. I want to add autofocus to an element by ID. — user70192
– user70192, Commented Jun 27, 2014 at 15:06

KSev · Accepted Answer · 2014-07-28 20:06:20Z

1

You can use the $set method on the $compile.directive.Attributes object. See the documentation here. This will create a new attribute which AngularJS will recognize. Remember to use the normalized (camelCase) version of the attribute. You can do it in the link function of your directive.

answered Jul 28, 2014 at 20:06

KSev

1,8891 gold badge24 silver badges24 bronze badges

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

Comments

IUnknown · Accepted Answer · 2014-06-27 15:15:45Z

0

That's directive:

(function(){
  angular.module('ng').directive('dynamicAutoFocus', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs){
        scope.$watch(attrs.dynamicAutoFocus, function(id){

          if(angular.isDefined(id)){
            var target = document.getElementById(id);
            if(target){
              target.focus();
            }
          }
        });
      }
    };
  });
})();

Plunker

answered Jun 27, 2014 at 15:15

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

Collectives™ on Stack Overflow

AngularJS - Add attribute at runtime

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related