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

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

编写为角度指令的小部件：

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>

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

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

动态列
静态列

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

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

{{dynamicValue（）}
{{myAttr}}

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

我唯一能想到的就是使用jquery在事后操纵

，这是非常没有角度的

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

解决了：公认的答案有几个有用的线索。特别是在child指令和advice的范围内使用双向绑定，以便在模型上、在DOM上进行排序。我不得不添加一个

$watch

来实现它，见下文。我很想听到任何人的意见，如果他们可以改善这一点

---

如果要修改子对象，使其能够按其排序，请将其作为对象而不是属性传递

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

及

{{myAttr.dynamicValue}{{myAttr.n}

---

jsfiddle：

问题的角度解决方法：

如果希望以角度方式进行排序，则将排序应用于模型，而不是已呈现到页面中的

元素。唯一知道模型完整相关部分的地方是父窗口小部件的控制器，这是必须进行排序的地方

后果：

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

当然，您可以在模板中这样参数化指令：

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

---

就我而言，我更愿意将实际的动态值写入模型，而不是计算它的函数，但如注释所示，如果您进行相应排序，这两个值都可以工作。

不能按原样<代码>动态值将在任何排序后的摘要期间计算。为什么它不能成为父控制器的一部分，因此可以在排序函数中使用？这样想吧……您是说我现在想根据稍后将更改的值对数组进行排序

[[myAttr]]

？！不应该是

{myAttr}}

？你能为你的问题准备好fiddle或plunkr吗？@vucalur Chris使用非标准括号——你可以定义你自己的打开和关闭角度表达式的模式。不幸的是，当dynamicValue是一个函数时，你的方法不起作用。我需要该表根据执行子控制器时未确定或不可用的值动态排序。然后查看筛选器。你可以在行上应用过滤器：我必须调整这个，但是你说的一些事情帮助很大。请参阅问题中我的JSFIDLE。