Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS bind value into data attribute

Tags:

angularjs

Does anyone know how to bind an interpolated value into a data attribute using AngularJS?

<input type="text" data-custom-id="{{ record.id }}" />

Angular doesn't seem to interpolate that value since its apart of the structure of the element. Any ideas how to fix this?

like image 709
matsko Avatar asked Aug 01 '12 16:08

matsko


People also ask

How can you bind an element to data in AngularJS?

Two-way Binding Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

What is Ng ATTR?

If expression is undefined, still fires directive link function, even though the directive is not added in the DOM. #16441.

What is AngularJS one way data binding?

Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. The way that AngularJS implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times.

When you create a data binding in Angular Are you working with attributes or properties What is the difference anyway?

Attribute binding syntax is like property binding. In property binding, we only specify the element between brackets. But in the case of attribute binding, it starts with the prefix attar, followed by a dot (.), and the name of the attribute.


1 Answers

Looks like there isn't a problem after all. The template is parsed and my controller was downloading the data, but when the template was being parsed data wasn't there yet. And the directive I put needs the data to be there os in the mean time its just picking up empty macro data.

The way that I solved this was with the $watch command:

$scope.$watch('ready', function() {
  if($scope.ready == true) {
    //now the data-id attribute works
  }
});

Then when the controller has loaded all the ajax stuff then you do this:

$scope.ready = true;
like image 133
matsko Avatar answered Oct 02 '22 14:10

matsko