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

Question

我正在使用 Angular js 的 tabset 指令并在选项卡中使用 twitter 引导滑块，

我的 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>

控制器代码

 ......
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 应用中使用 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

您使用的滑块有一个示例演示如何执行此操作。看看这个页面上的“12”框：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>