angularjs - angular.element 在 Angular js 的 tabset 指令中不起作用

Question

我正在使用 Angular JS 的 tabset 指令，并在选项卡中使用 twitter bootstrap slider ，

我的 Slidestop 事件未调用，但它在选项卡外运行良好。

我知道 tabset 指令有自己的作用域，但不知道以下问题的解决方案:-

<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 代码

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

 })

问题是 - 当 slider 在选项卡内时不会出现警报，当 slider 在选项卡外时警报会出现

我正在使用this slider

谢谢

Answer 1

我已经解决了使用 ui-event 指令来触发 Slidestop 事件

HTML代码

<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 代码

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

}