如何编写将表达式绑定到名称的指令"ng-let" [英] how to write directive 'ng-let' that binds an expression to a name

问题描述

我想编写一条指令，该指令可镜像ng-repeat，但将名称绑定到单个变量:

I want to write a directive that mirrors ng-repeat but binds a name to a single variable:

所以不要写这样的东西:

so instead of writing something like this:

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>

这将如何完成?

在要过滤，排序和分页数据，但又要重用绑定步骤的情况下，

An example of how this might be used is in a situation where you want to filter, sort and page the data, but you also want to reuse the steps of the bindings

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')
       "

然后您可以在子元素中相应地使用页面:

Then you can use page accordingly in the child elements:

  ng-repeat="g in groups"

  or {{bert.length}}

推荐答案

此处的目的是要有一个将变量添加到范围的指令.链接功能如下所示(我尚未测试过，但距离应该不太远).

The purpose here is to have a directive that adds a variable to the scope. Here's what the linking function could look like (I haven't tested it, but it shouldn't be too far off).

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);

}

编辑:请注意，这不会深入观察作为表达式传递的数组.仅当引用发生更改时.

Note that this will not deeply watch an array passed as an expression. Only if the reference changes.

要允许多个定义，可以进行一些小的调整:

Edit 2: To allow multiple definitions, small adjustments can be made:

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);
    });
}

这篇关于如何编写将表达式绑定到名称的指令"ng-let"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！