web-dev-qa-db-ja.com

チェックボックスはangularjsのスコープにバインドしていません

私はng-modelを使用してチェックボックスをスコープにバインドしようとしています。チェックボックスの初期状態は、スコープモデルにうまく対応していますが、チェックボックスをオン/オフにしても、モデルは変わりません。注意すべき点は、ng-includeを使用して実行時にテンプレートが動的にロードされることです。

app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) ->

  $scope.billing_is_shipping = false
  $scope.bind_billing_to_shipping = ->
    console.log $scope.billing_is_shipping


<input type="checkbox" ng-model="billing_is_shipping"/>

このボックスをオンにすると、コンソールはfalseをログに記録し、チェックを外すと、コンソールは再びfalseを記録します。また、スコープに注文モデルがあり、チェックボックスのモデルをorder.billing_is_shippingに変更すると、正常に機能します

angularjsbindingcheckboxcoffeescriptangularjs-ng-include
56
chris

私はこの問題にしばらく苦労しました。働いたのは、入力をプリミティブではなくオブジェクトにバインドすることでした。

<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller
$scope.someObject.someProperty = false
147
Matt

テンプレートがng-includeを使用してロードされている場合、$parentを使用して更新する場合は、ng-includeを使用して親スコープで定義されたモデルにアクセスする必要があります。

<div ng-app ng-controller="Ctrl">
    <div ng-include src="'template.html'"></div>
</div>

<script type="text/ng-template" id="template.html">
    <input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/>
</script>

function Ctrl($scope) {
    $scope.billing_is_shipping = true;

    $scope.checked = function(){
        console.log($scope.billing_is_shipping);
    }
}

DEMO

23
zs2020

マットの答え を展開して、このまさに問題に対処し、説明を提供するこのEgghead.ioビデオを参照してください： $ scopeにプロパティを直接バインドすると問題が発生する可能性がある理由

参照： https://groups.google.com/forum/#!topic/angular/7Nd_me5YrH

通常、これは、ng-controllerと新しいスコープを作成している入力との間の別のディレクティブによるものです。 selectはその値を書き出すときに、最新のスコープまで書き込みます。したがって、より遠くにある親ではなく、このスコープに書き込みます。

ベストプラクティスは、ng-modelのスコープの変数に直接バインドしないことです。これは、ngmodelに常に「ドット」を含めることとしても知られています。

9
Rk220

私のディレクティブ（link関数内）で、スコープ変数successを次のように作成しました。

link: function(scope, element, attrs) {
            "use strict";

            scope.success = false;

また、スコープテンプレートには次のような入力タグが含まれています。

<input type="checkbox" ng-model="success">

これは機能しませんでした。

最後に、スコープ変数を次のように変更しました。

link: function(scope, element, attrs) {
            "use strict";

            scope.outcome = {
                success : false
            };

そして、私の入力タグは次のようになります。

<input type="checkbox" ng-model="outcome.success">

期待どおりに動作するようになりました。私はこれの説明を知っていましたが、おそらく誰かがそれを記入してくれることを忘れていました。 :)

9
ancajic