AngularJS和jQuery Mobile的范围滑块将不会更新模型

这是我jQueryMobile页与AngularJS：AngularJS和jQuery Mobile的范围滑块将不会更新模型

<div data-role="page" id="page1"> 
    <div data-role="header"><h1>Chart</h1></div> 
    <div data-role="content"> 
     <div id="plotChart" class="myChart"></div> 
     <form> 
      <input type="range" value="0" min="-10" max="10" ng-init="0" ng-model="value1" ng-change="update()"/> 
      <input type="range" value="0" min="-10" max="10" ng-init="0" ng-model="value2" ng-change="update()"/> 
      <input type="range" value="0" min="-10" max="10" ng-init="0" ng-model="value3" ng-change="update()"/> 
     </form> 
     <div class="ui-grid-b"> 
      <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Value1: {{value1}}</div></div> 
      <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Value2: {{value2}}</div></div> 
      <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">Value3: {{value3}}</div></div> 
     </div> 
    </div> 
</div>

我的更新功能如下：

function MyCtrl($scope){ 
    $scope.update = function(){ 
     console.log("C=" + $scope.value3 + "B="+$scope.value2 + "A="+$scope.value1); 
    } 
}

的{{} value1-3 }在移动滑块时正确更新更新功能在移动滑块时保持记录为零。

为什么？这里涉及不同的范围吗？

（也滑块具有-10作为初始值 - 不-10定义）的jquery-1.9

的jquery-1.9.1.min.js
jquery.mobile-1.3.0 .min.js
jQuery的移动角适配器1.3.1.js

来源

2013-04-03 Reini

可能会对您有所帮助：http://stackoverflow.com/a/20802111/1206613 – Cherniv

ng-init=0将不设置任何范围的属性。 ng-init需要一个Angular表达式，它将根据范围进行评估。你可以写ng-init='value1 = 0'但最好是在你的控制器初始化模型值：

$scope.value1 = 0;

value = 0不应与角表单元素（除了type=radio）一起使用。

这是一个minimal fiddle，它只包含Angular，并且只显示我上面提到的变化。

来源

2013-04-04 03:56:26

谢谢！唯一我无法弄清的是，如果你的代码与我的代码的完整版本相比有微小的变化，或者昨天晚上这是一个缓存问题...... – Reini

Mark，任何想法为什么范围模型绑定不是在IE10上工作？（是的，是的，我知道，最大的兼容性）。 IE10无法在我的代码或您的jsFiddle – Jason

进一步研究，并在这个问题的意见有更多的信息http://stackoverflow.com/q/16310707/524511 简而言之，webkit是'帮助'的角度通过提高范围的额外事件 - 通常用于文本框的事件。 – Jason

AngularJS和jQuery Mobile的范围滑块将不会更新模型

回答

相关问题