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

Question

这是我jQueryMobile页与AngularJS：

<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

Answer 1

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

$scope.value1 = 0; 

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

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