1

この質問は、 Mikeの投稿「ディレクティブ内でのng-modelの使用」で尋ねられたものと似ています。

ユーザー入力フィールドに基づいて計算された出力を表示する小さなスプレッドシートであるページを書いています。ディレクティブを使用して、次のようなカスタムタグを作成しています。

<wbcalc item="var1" title="Variable 1" type="input"></wbcalc>
<wbcalc item="var2" title="Variable 2" type="input"></wbcalc>
<wbcalc item="calc" title="Calculation" type="calc"></wbcalc>

'item'フィールドは、コントローラー内のスコープデータを参照します。

$scope.var1 = '5';  // pre-entered input
$scope.var2 = '10'; // pre-entered input
$scope.calc = function() {
    return parseInt($scope.var1) + parseInt($scope.var2);
};

また、「type」フィールドは、アイテムを文字列として扱うか関数として扱うかを知るために、ディレクティブのロジックで使用されます。

これのフィドルは次のとおりです。http： //jsfiddle.net/gregsandell/PTkms/3/ 出力要素を驚くべきコード行で動作させることができます。

html.append(angular.element("<span>")
    .html(scope.$eval(attrs.item + "()"))
);

...そして私はこれを使用して入力をスコープ付きコントローラーデータに接続しています（これはMikeの投稿から取得しました：

var input = angular.element("<input>").attr("ng-model", attrs.item);
$compile(input)(scope);
html.append(input);

...フィールドに値を入力しますが、フィドルの入力を変更するとわかるように、値は計算にバインドされません。

コントローラスコープのデータをディレクティブ内のjqliteで生成されたhtmlにリンクするためのより良いおよび/またはより直感的な方法はありますか？

4

1 に答える 1

3

これを見てください、私はあなたがプロセスをかなり単純化できると思います。

http://jsfiddle.net/PTkms/4/

angular.module('calculator', []).directive('wbcalc', function($compile) {
    return {
        restrict: 'E',
        template: '<div><div class="span2">{{title}}</div><input ng-model="item"></div>',
        scope: {
            title: '@',
            item: '='
        },
        link: function(scope, element, attrs) {
            // Don't need to do this.
        }
    }
});
function calcCtrl($scope) {
    $scope.var1 = '5';
    $scope.var2 = '10';

    $scope.calc = function() {
        // Yes, this is a very simple calculation which could
        // have been handled in the html with {{0 + var1 + var2}}.
        // But in the real app the calculations will be more
        // complicated formulae that don't belong in the html.
        return parseInt($scope.var1) + parseInt($scope.var2);
    };
}

jQueryが好きだとおっしゃっていましたが、Angularを最大限に活用するには、Angularの方法で考える必要があります。バインディングを使用し、DOMを直接操作しないでください。

この例では、使用されている分離されたスコープバインディング（'@'および'='）を確認すると便利です。以下を参照してください。

http://docs.angularjs.org/guide/directive

于 2013-03-04T22:15:10.197 に答える