0

これは、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
4

1 に答える 1

0

ng-init=0スコープ プロパティを設定しません。 ng-initは、スコープに対して評価される Angular 式を期待します。次のように書くこともできますng-init='value1 = 0'が、コントローラーでモデル値を初期化することをお勧めします。

$scope.value1 = 0;

value = 0Angular フォーム要素と一緒に使用しないでください ( を除くtype=radio)。

これは、 Angular のみを含む最小限のフィドルであり、上で説明した変更のみを示しています。

于 2013-04-04T03:56:26.837 に答える