1

AngularJSを使用してアンケートフォームを作成しており、HTMLを軽量に保つために必要なさまざまな種類の質問をテンプレート化しています。

HTML：

<qtnyesno qtn-variable="testVar">This is a test question. Yes or No?</qtnyesno>
testVar = {{testVar}}

JS：

var module = angular.module('app', [])
.directive('qtnyesno', function() {
        return {
                restrict: 'E', // must be an HTML element
                transclude: true,
                scope: {
                        valvar: '@qtnVariable',
                },
                template:
                    '<div>' +
                    '<label ng-transclude></label>' +
                    '<label class="radio inline"><input type="radio" name="rdo{{valvar}}" value="1" ng-model="{{valvar}}">Yes </label>' +
                    '<label class="radio inline"><input type="radio" name="rdo{{valvar}}" value="0" ng-model="{{valvar}}">No </label>' +
                    '<hr></div>',
                replace: true,
        };
});

入力タグng-model="{{valvar}}"内で使用すると、コンパイルエラーが発生します。

代わりにng-click="{{valvar}} = 0"を使用しようとすると、コンパイルエラーは発生しませんが、ラジオボタンをクリックしてもtestVarの値を取得するための表示ステートメントが機能しません。

ボタンをクリックしたときにHTMLの最後の行がtestVarの値で適切に更新されるように、これをどのように修正しますか？

Bootstrapと一緒にAngularJSを使用しています。私は両方のフレームワークにかなり慣れていないので、これがこれを行うための最良の方法であるかどうかはわかりません。

4

2 に答える 2

1

Brandonの権利、分離スコープで双方向バインディングを取得するために使用しますが、もう1つ、宣言=の周りから中括弧を削除する必要があります。ng-model

ng-model宣言は角度式を取り、スコープ内でそれらを評価するため、中括弧で評価を強制する必要はありません。実際、中括弧は物事を台無しにします。

// so just
ng-model="valvar"

これらの変更を加えたコードをいじくりまわします。

于 2013-02-16T00:59:16.217 に答える
1

分離スコープで双方向バインディングを取得するには、次を使用します=。

scope: {
  valvar: '=qtnVariable',
},

@結果のスコープ変数を補間付きの文字列にします。

于 2013-02-15T22:00:04.100 に答える