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

Question

这是我的 AngularJS jQueryMobile 页面：

<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-mobile-angular-adapter-1.3.1.js

Answer 1

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

$scope.value1 = 0;

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

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