2013-04-03 182 views
0

这是我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
+0

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

回答

0

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

$scope.value1 = 0; 

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

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

+0

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

+1

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

+0

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