Angular binding does not work in data- attribute

Question

I am using some css html template that comes with many html components and with lots of data-attributes for various things. For example for slider it has something like

 <div class="slider slider-default">
    <input type="text" data-slider class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-value="{{ slider }}" data-slider-selection="after" data-slider-tooltip="hide">
</div>

Here I am trying to bind the value

data-slider-value="{{ slider }}"

But it's not working. Variable 'slider' is set in the $scope as:

   $scope.slider = 80;

Same value 80 shows up right when I bind it as:

 <h4>I have {{ slider }} cats</h4>

I have also tried

    ng-attr-data-slider-value="{{ slider }}"

It didn't work.

Update

The directive has something like this

function slider() {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.slider();
        }
    }
};

where element.slider(); calls the code in bootstrap-slider.js (from here) for each of the sliders.

What template are you using that provides these components? We need to know what Javascript is being used to render the slider so we can know what to call. Can you also please try to reproduce this using something like jsFiddle, Plunkr, jsBin, CodePen or the inbuilt snippet support on StackOverflow? — GregL
– GregL, Commented Apr 9, 2015 at 2:25
its a wrapbootstrap template. The template itself is an angular based template. it has directives related to slider as well. i try to narrow it down in plunkr. — Raas Masood
– Raas Masood, Commented Apr 9, 2015 at 2:27
Do you know which angular-slider.js is being used. Is it the one from here or here? — GregL
– GregL, Commented Apr 9, 2015 at 2:45

GregL · Accepted Answer · 2015-04-09 04:08:59Z

5

I played with this for a while, and came up with a few options for you. See my Plunkr to see them in action.

Option 1: No need to update the scope value when the slider changes

This will work with the HTML from your question. The following is what you should change the directive code to.

app.directive('slider', function slider() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      attrs.$observe('sliderValue', function(newVal, oldVal) {
        element.slider('setValue', newVal);
      });
    }
  }
});

Option 2: Two way binding to the scope property

If you need the scope property to be updated when the slider handle is dragged, you should change the directive to the following instead:

app.directive('sliderBind', ['$parse',
  function slider($parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var val = $parse(attrs.sliderBind);
        scope.$watch(val, function(newVal, oldVal) {
          element.slider('setValue', newVal);
        });

        // when the slider is changed, update the scope
        // property.
        // Note that this will only update it when you stop dragging.
        // If you need it to happen whilst the user is dragging the
        // handle, change it to "slide" instead of "slideStop"
        // (this is not as efficient so I left it up to you)
        element.on('slideStop', function(event) {
          // if expression is assignable
          if (val.assign) {
            val.assign(scope, event.value);
            scope.$digest();
          }
        });
      }
    }
  }
]);

The markup for this changes slightly to:

<div class="slider slider-default">
  <input type="text" data-slider-bind="slider2" class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-selection="after" data-slider-tooltip="hide" />
</div>

Note the use of the data-slider-bind attribute to specify the scope property to bind to, and the lack of a data-slider-value attribute.

Hopefully one of these two options is what you were after.

answered Apr 9, 2015 at 4:08

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

6 Comments

Raas Masood Over a year ago

o man thank you so much. o was up many nights to figure this out. really grateful to you. It has cleared many concepts.

Raas Masood Over a year ago

My application is using toggle switch bootstrap-switch.org as well. i tried to use the same approach you mentioned above. but it looks like with every component i have change my approach. i want the same two way binding. i named by directive switchBind. now according to documentation there is no function hat sets the value true or false. i tried hooking to switchChange.bootstrapSwitch event which also doesn't seems to be firing. i want to have a uniform approach to address all upcoming UI elements i encounter that you put a watch on something and set something. any suggestion?

Raas Masood Over a year ago

i figured out something like 'setState' element.bootstrapSwitch('setState', true ); but still not working

Raas Masood Over a year ago

there is a solution based on ng-bind but cant we do this using the same approach as we did for slider.

GregL Over a year ago

Try this Plunkr. In fact, I actually now think using ngModelCtrl methods to update the value specified in the ng-model attribute is probably the better approach for both widgets. See if you can do it for the slider as well. ng-bind is not the way to go, it is one-way binding and sets the innerHTML property, rather than the value of an input.

|

Julio Cesar Brito Gomes · Accepted Answer · 2024-10-06 14:36:40Z

2

I use attr and it works for me. Try this:

attr.data-slider-value="{{slider}}"

edited Oct 6, 2024 at 14:36

answered Jan 13, 2021 at 19:24

Julio Cesar Brito Gomes

87010 silver badges14 bronze badges

1 Comment

Raas Masood Over a year ago

Thank God we have Angular 2+ now :)

Collectives™ on Stack Overflow

Angular binding does not work in data- attribute

Update

2 Answers 2

Option 1: No need to update the scope value when the slider changes

Option 2: Two way binding to the scope property

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

Option 1: No need to update the scope value when the slider changes

Option 2: Two way binding to the scope property

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related