Twitter Bootstrap Question posted in

Twitter bootstrap – 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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search