如何对动态值的子指令进行排序

How to sort child directives on dynamic values

本文关键字：指令 排序 动态      更新时间：2023-09-26

我发现这是一个有用的模式：

编写为角度指令的小工具：

MyApp.directive('parentWidget', function () {
    return {
        controller: function ($scope) {
            $scope.widgets = [{n: 1}, {n: 2}, {n: 3}];
        }
    };
});
MyApp.directive('childWidget', function () {
    return {
        scope: {myAttr: '@myAttr'},
        controller: function ($scope) {
            $scope.dynamicValue = function () {
                return 'dynamic';
            };
        }
    };
});

父窗口小部件包含在页面中，如下所示：

<table parent-widget></table>

父窗口小部件的模板如下所示：

<thead>
    <tr>
        <th>The Dynamic Column</th>
        <th>The Static Column</th>
    </tr>
</thead>
<tbody>
    <tr child-widget
        ng-repeat="w in widgets | orderBy:n"
        my-attr="{{w.n}}">
    </tr>
</tbody>

子窗口小部件的模板如下所示：

<td>{{ dynamicValue() }}</td>
<td>{{ myAttr }}</td>

我的问题：如何根据子窗口小部件的动态值排序表格？如图所示，我对静态值很满意。

我唯一能想到的就是使用jquery来处理事实之后的<tr>，这是非常不成角度的。

编辑：一些乐于助人的评论者证实了我的怀疑，即这是不可能的。所以我想我的问题是，重组这种模式以允许这样的排序的最佳方法是什么？我更愿意继续分离关注点，即dynamicValue（）是子窗口小部件的关注点，代码应该反映这一点。

解决：公认的答案有几个有用的线索。特别是，在子指令的作用域中使用双向绑定，以及在DOM上对模型进行排序的建议。我必须添加一个$watch才能实现，请参见下文。我很想听听任何人的意见，如果他们能在这方面有所改进的话。

工作jsfiddle

问题的角度方法：

如果要以角度方式进行排序，请将排序应用于模型，而不是应用于已呈现到页面中的<tr>元素。唯一知道模型的完整相关部分的地方是父小部件的控制器，这就是必须进行排序的地方。

后果：

为了能够排序，您当然需要访问指令生成的动态值，但这不是问题，因为您的指令可以在它们看到的模型片段中设置动态值。然而，他们必须能够将值写入他们的小部件对象（模型）：

MyApp.directive('parentWidget', function () {
    return {
        controller: function ($scope) {
            // init the dynamic values with null to make explicit that they
            // are part of the model
            $scope.widgets = [{n: 1, d: null}, {n: 2, d: null}, {n: 3, d: null}];
        }
    };
});
MyApp.directive('childWidget', function () {
    return {
        scope: {
          myAttr: '@',
          dynamicValue: '='
        },
        controller: function ($scope) {
            // assign the function here or a static value. Whatever works best for you.
            $scope.dynamicValue = function () {
                return 'dynamic';
            };
        }
    };
});

当然，然后在模板中参数化你的指令：

<tr child-widget
  ng-repeat="w in widgets | orderBy:n"
  my-attr="{{w.n}}"
  dynamic-value="w.d">
</tr>

就我而言，我更喜欢将实际的动态值写入模型，而不是计算它的函数，但正如注释中所示，如果您进行相应的排序，两者都会起作用。

如果您想修改子级，使其能够按它们排序，则将它们作为对象而非属性传递。

<tr ... my-attr="w"></tr>

和

<td>{{ myAttr.dynamicValue }}</td><td>{{ myAttr.n }}</td>

jsfiddle：http://jsfiddle.net/4J2aw/

相关文章：