动态更新AngularJS指令中的ion.rangeSlider ngModel
发布时间：2020-12-17 07:50:32 所属栏目：安全 来源：网络整理
导读：我正在尝试在其绑定的ng-model范围变量更改时更新Ion.RangeSlider的值.使用Ion.RangeSlider时模型会更新,反之则不然.当模型值发生变化时,具有相同ng模型的其他输入会更新,因此这必须是一些特殊情况. 编辑：喔！这是一个片段@lin :)也是jsfiddle. var app = a
|
我正在尝试在其绑定的ng-model范围变量更改时更新Ion.RangeSlider的值.使用Ion.RangeSlider时模型会更新,反之则不然.当模型值发生变化时,具有相同ng模型的其他输入会更新,因此这必须是一些特殊情况.
编辑：喔！这是一个片段@lin :)也是jsfiddle. var app = angular.module('ngModelIonRangeSliderDemo',[]);
app.controller('MainCtrl',function ($scope,$rootScope,$timeout) {
$scope.someNumber = 10;
}).directive('ionRangeSlider',function ionRangeSlider() {
return {
restrict: 'A',scope: {
rangeOptions: '=',model: '=ngModel'
},link: function (scope,elem,attrs) {
scope.$watch('model',function () {
elem.ionRangeSlider(scope.rangeOptions);
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinFlat.min.css" />
<div ng-app="ngModelIonRangeSliderDemo">
<div ng-controller="MainCtrl" class="wrapper">
<h3>Text input updates slider,but not vice-versa.</h3>
<input ion-range-slider ng-model="someNumber" range-options="{min: -100,max: 100,step: .001}">
<br/>
<input type="text" ng-model="someNumber" class="form-control">
</div>
</div>
我已经在十多个有点相关的堆栈溢出帖子中尝试了各种建议(这就是我如何设置当前范围.在ngModel上的$watch方案),但没有一个有效.我的控制台中没有任何错误.怎么了？另外,为什么在我的指令中没有提及模型的情况下它是否有效？如果我在这篇文章中没有提到任何重要内容,请告诉我.
只需在你的指令中使用slider.update()就可以了：
var app = angular.module('myApp',$timeout) {
$scope.someNumber = 15;
$scope.apply = false;
}).directive('ionRangeSlider',model: '=ngModel',apply: '=apply'
},attrs) {
elem.ionRangeSlider(scope.rangeOptions);
scope.$watch('apply',function () {
if (scope.apply) {
scope.apply = false;
var slider = elem.data("ionRangeSlider");
slider.update({
from: scope.model
});
}
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinFlat.min.css" />
<div ng-app="myApp" ng-controller="MainCtrl" class="wrapper">
<h3>Text input updates slider and vice-versa.</h3>
<input ion-range-slider ng-model="someNumber" apply="apply" range-options="{min: -100,step: .001}">
<br/>
<input type="text" ng-model="someNumber" class="form-control" ng-change="apply = true">
</div>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |