在 AngularJS 指令中动态更新 ion.rangeSlider ngModel [英] Dynamically update ion.rangeSlider ngModel in AngularJS directive

问题描述

我试图在 Ion.RangeSlider 绑定的 ng-model 范围变量发生变化时更新它的值.使用 Ion.RangeSlider 时模型会更新，反之亦然.当模型值改变时，其他具有相同 ng-model 的输入会更新，所以这一定是一些特殊情况.

哇！这是@lin 的一个片段 :) 还有 jsfiddle.

var app = angular.module('ngModelIonRangeSliderDemo', []);app.controller('MainCtrl', function ($scope, $rootScope, $timeout) {$scope.someNumber = 10;}).directive('ionRangeSlider', 函数 ionRangeSlider() {返回 {限制:'A'，范围: {范围选项:'='，模型:'=ngModel'},链接:函数(范围，元素，属性){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>文本输入更新滑块，但反之则不然.</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">

<小时>

我在十多篇有点相关的堆栈溢出帖子中尝试了各种建议(这就是我在 ngModel 上设置当前 scope.$watch 方案的方式)，但没有一个奏效.我的控制台中没有任何错误.怎么了?另外，为什么它在我的指令中没有提到模型就不起作用?如果我没有在这篇文章中包含任何重要的内容，请告诉我.

解决方案

只需在指令中使用 slider.update() 即可:

var app = angular.module('myApp', []);app.controller('MainCtrl', function ($scope, $rootScope, $timeout) {$scope.someNumber = 15;$scope.apply = false;}).directive('ionRangeSlider', 函数 ionRangeSlider() {返回 {限制:'A'，范围: {范围选项:'='，模型:'=ngModel'，申请:'=申请'},链接:函数(范围，元素，属性){elem.ionRangeSlider(scope.rangeOptions);scope.$watch('apply',function () {如果(范围.应用){scope.apply = false;var 滑块 = elem.data("ionRangeSlider");滑块.更新({来自: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>文本输入更新滑块，反之亦然.</h3><input ion-range-slider ng-model="someNumber" apply="apply" range-options="{min: -100, max: 100, step: .001}"><br/><input type="text" ng-model="someNumber" class="form-control" ng-change="apply = true">

I'm trying to update the value of an Ion.RangeSlider when its bound ng-model scope variable changes. The model updates when the Ion.RangeSlider is used, but not vice-versa. Other inputs with the same ng-model update when the model value changes, so this must be some special case.

Edit: Woo! Here's a snippet @lin :) Also 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>

---

I have tried all kinds of suggestions in over ten somewhat-related stack overflow posts (which is how I have set up the current scope.$watch scheme on the ngModel), but none have worked. There aren't any errors in my console. What's wrong? Also, why doesn't it work without any mention of the model in my directive? Please let me know if there's anything important I have failed to include in this post.

解决方案

Just use slider.update() inside your directive and you will be fine:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope, $rootScope, $timeout) {

    $scope.someNumber = 15;
    $scope.apply = false;

}).directive('ionRangeSlider', function ionRangeSlider() {
   return {
      restrict: 'A',
      scope: {
         rangeOptions: '=',
         model: '=ngModel',
         apply: '=apply'
      },
      link: function (scope, elem, 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, max: 100, step: .001}">
  <br/>
  <input type="text" ng-model="someNumber" class="form-control" ng-change="apply = true">
</div>

这篇关于在 AngularJS 指令中动态更新 ion.rangeSlider ngModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！