Question

我正在使用角度js的tabset指令并使用tab中的twitter bootstrap滑块

我的幻灯片暂停事件没有调用，但它在标签之外运行良好。

我知道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>

控制器代码

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

 })

问题是 - 当选项卡内的滑块时，警报未到来，当选项卡在选项卡外时，警报即将到来

我正在使用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}}

控制器代码

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

}

Answer 2

请勿在角度应用中使用angular.element。

编辑：这不适用于ui-slider。直到ui-slider正在进行中我才会使用它。

将此添加到您的输入中：

ng-change="alertChange()"

这是给你的控制器：

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

什么不起作用？在大多数情况下，angular.element会尝试过早地将偶数绑定到元素。当您尝试绑定时，可能无法加载您的DOM“#slider”元素。

编辑另一种选择：

首先，在多加注意后，我根本不会推荐这个滑块。这实际上是一项正在进行的工作，并不是真的可靠。

我在这个plunker

中为你做了一个带有绑定的html滑块的例子

您的滑块如下所示：

<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">

每次值不会改变100毫秒时，这将更新模型。您需要这样做以避免激发过多的ng-change功能。

在您的javascript中，您只需声明您的功能

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

我知道这不是解决方案，而是替代方案。它不像其他滑块那样性感，但至少它起作用了。

希望它对你有所帮助。

Answer 3

您正在使用的滑块有一个示例演示如何执行此操作。看看盒子＆＃34; 12＆＃34;在此页面上：http://angular-ui.github.io/ui-slider/demo/demo.html

在您的控制器中，您可以添加以下内容：

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

您的HTML必须引用slider.options，以便触发回调：

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

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

3 个答案: