2

ng-repeat を反映しているが、名前を単一の変数にバインドするディレクティブを書きたい:

したがって、次のようなものを書く代わりに:

ng-repeat="summary in data.accounts.all.summaryAsArray()"

あなたはこのようなものを書くことができます

ng-let="summary as data.accounts.all.summary();
        global.some.info as processSummary(summary);"

どこ：

data.accounts.all.summaryAsArray() returns [<obj>]

data.accounts.all.summary() returns <obj>

これはどのように行われますか？

これがどのように使用されるかの例は、データをフィルタリング、ソート、およびページングしたいが、バインディングのステップも再利用したい状況です。

ng-let="berts as data('users.list') | filterBy:select('name'):contains('Bert') | sort:by('date-joined');
        groups as berts | subArray:page.perpage:pagecurrent | groupBy:has('fish')
       "

次に、子要素でそれに応じてページを使用できます。

  ng-repeat="g in groups"

  or {{bert.length}}
4

1 に答える 1

3

ここでの目的は、スコープに変数を追加するディレクティブを用意することです。リンク機能は次のようになります (テストはしていませんが、それほどかけ離れたものではないはずです)。

scope: false,
transclude: 'element',
link: function($scope, $element, $attr) {
    // We want to evaluate "(variable) as (expression)"
    var regExp = /^\s*(.*)\s+as\s+(.*)\s*/,
        match = $attr.ngLet.match(regExp);

    if(!match) return; // Do nothing if the expression is not in a valid form

    var variableName = match[1],
        expression = match[2],
        assign = function(newValue) { $scope[variableName] = newValue; }

    // Initialize the variable in the scope based on the expression evaluation
    assign($scope.$eval(expression));

    // Update when it changes
    $scope.$watch(expression, assign);

}

編集:これは、式として渡された配列を深く監視しないことに注意してください。参照が変更された場合のみ。

編集 2:複数の定義を許可するために、小さな調整を行うことができます。

scope: false,
transclude: 'element',
link: function($scope, $element, $attr) {
    // We want to evaluate "(variable) as (expression)"
    var regExp = /^\s*(.*)\s+as\s+(.*)\s*/;

    angular.forEach($attr.ngLet.split(';'), function(value) {
        var match = value.match(regExp);

        if(!match) return;

        var variableName = match[1],
            expression = match[2],
            assign = function(newValue) { $scope[variableName] = newValue; };

        // Initialize the variable in the scope based on the expression evaluation
        assign($scope.$eval(expression));

        // Update when it changes
        $scope.$watch(expression, assign);
    });
}
于 2013-06-28T01:54:21.617 に答える