How to bind an attribute name using expression in angularjs?

Question

I want create kendo control using angularJs for that bind an expression inside input field as a attribute name.

Code:

<input {{controllabelName}} />

The above code is not working. if i will use ng-bind then it's binding value to that input not as an attribute name.

please anyone help me to achieve this.

if you want to add attribute to the element then you can use angular directive. in directive you can add the attributes to the element. — Ravin Singh D
– Ravin Singh D, Commented Mar 16, 2016 at 9:35
i have add the example as answer, also i include plunker link — Ravin Singh D
– Ravin Singh D, Commented Mar 16, 2016 at 13:09
What you wanted to achieve here, you can't add attribute dynamically using {{}} directive. We can help with better alternative approach by understanding a goal... — Pankaj Parkar
– Pankaj Parkar, Commented Mar 16, 2016 at 13:11
@PankajParkar Actually i want to create kendo control using angular. for example i want to create Kendo AutoComplete textbox. that would be <input kendo-auto-complete />, here the kendo-auto-complete i will get dynamically. i hope i explained well. — bagya
– bagya, Commented Mar 17, 2016 at 7:32

Ravin Singh D · Accepted Answer · 2016-03-16 13:08:21Z

2

HTML

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="script.js"></script>
</head>

<body>
<input type="text" customdirective/>
</body>
</html>

script.js

angular.module('exampleApp', [])
.directive('customdirective', function() {
  return {
   restrict: 'A',
   link: function(scope, ele, attr) {
    ele.attr('test', 'test');
  }
 }
})

Plunker link

answered Mar 16, 2016 at 13:08

Ravin Singh D

95310 silver badges20 bronze badges

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

3 Comments

bagya Over a year ago

Thanks for your answer but this is way wont work, what i want to achieve. Actually i want to create kendo control using angular. for example i want to create Kendo AutoComplete textbox. that would be <input kendo-auto-complete />, here the kendo-auto-complete i will get dynamically. i hope i explained well.

Ravin Singh D Over a year ago

get the dynamic value and pass the value to scope. you can access the scope values inside the directive using the scope argument which is passed in the link function.

Ravin Singh D Over a year ago

if you are get the dynamic value from web service or some external system which have some delay in response then you may need to watch the scope value inside the directive. so if the scope value change directive will update.

Ashish Bairagi · Accepted Answer · 2016-03-16 09:37:10Z

0

Use ng-model if you want value to be bind otherwise just any attribute name :

<input ng-model="controllabelName" />

answered Mar 16, 2016 at 9:37

Ashish Bairagi

3822 silver badges15 bronze badges

1 Comment

bagya Over a year ago

ng-model also will bind a value to the field not as a attribute. for example controllabelName is "customer" i want input field is <input customer/>. I think here i explained correctly. Please let me know if you need more details.

Collectives™ on Stack Overflow

How to bind an attribute name using expression in angularjs?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related