CODEWITHSUNDEEP
angularjstwitter-bootstrap
user4692688
user4692688

Reputation:

angular.element is not working in tabset directive of angular js

I'm using tabset directive of angular js and using twitter bootstrap slider in tab,

My slidestop event is not calling but it's working well outside tab.

I know that tabset directive have its own scope , but dont know solution of following problem:-

<tabset class="tab-container">
    <tab heading="tab1">
               <div class="form-group">

                   <label>any Level</label>

                   <div class="input-group w-md">
                        <input id="slider" ui-jq="slider" ui-options="{min: 0,max: 10,step: 1,value: {{any_level}}}"
                       class="slider slider-horizontal form-control" type="text"
                       ng-model="any_level"> {{any_level}}

                  </div>
               </div>
    </tab>
</tabset>

controller code

 ......
angular.element("#slider").on('slideStop', function(data){
       alert('asdasd');

 })

problem is - alert is not coming when slider inside tab,alert is comming when slider outside tab

i am using this slider

Thanks

Upvotes: 2

Views: 1334

Answers (3)

user4692688
user4692688

Reputation:

i have solved using ui-event directive to fire slidestop event

Html Code

<input id="slider" 
        ui-event="{slideStop: 'alertChange($event)'}"  ui-jq="slider" 
        ui-options="{min: 0,max: 10,step: 1,value: {{any_level}}}"
        class="slider slider-horizontal form-control" type="text"  ng-model="any_level">


{{any_level}}

Controller Code

$scope.alertChange = function(data){
   console.log(data.value); // i can get slider value on slidestop

}

Upvotes: 4

Okazari
Okazari

Reputation: 4597

Just don't use angular.element in an angular app.

EDIT : This isn't really working with ui-slider. Till ui-slider is work in progress i just woudn't use it.

Add this to your input :

ng-change="alertChange()"

And this to your controller :

$scope.alertChange = function(){
   alert('hi');
}

What wasn't working ? In most of the case an angular.element will try to bind your even to the element too early. Your DOM "#slider" element isn't probably loaded when your try to bind.

EDIT An alternative :

First, after paying more attention i wouldn't recommend this slider at all. This is actually a work in progress and isn't really reliable.

I made you an exemple of a html slider with binding in this plunker

You slider looks like this :

<input id="slider" 
       ng-model-options="{ debounce: 100 }" 
       min="0"
       max="100" 
       ng-init="any_level = 0" 
       ng-change="alertChange()"
       type="range" 
       ng-model="any_level">

This will update the model each time the value will not change for 100miliseconds. You need this to avoid firing too much ng-change function.

In your javascript you just need to declare your function

$scope.alertChange = function(){
   console.log("I changed !");
   //or anything else you want to do
}

I know this is not a solution but an alternative. It's not sexy as the other slider, but at least it works.

Hope it helped you.

Upvotes: 1

seanhodges
seanhodges

Reputation: 17524

The slider you are using has an example demonstrating how to do this. Take a look at box "12" on this page: http://angular-ui.github.io/ui-slider/demo/demo.html

In your controller you can add the following:

$scope.slider = {
    'options': {
        stop: function (event, ui) { $log.info('Slider stop'); }; 
}

And your HTML you must reference slider.options so your callback is fired:

<div ui-slider="slider.options"
     min="0" max="50" ng-model="any_level"></div>

Upvotes: 0

Related Questions