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

Question

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

以 Angular Directive(指令)形式编写的小部件:

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>事情发生后，这是非常没有棱 Angular 的。

编辑:一些有用的评论者证实了我的怀疑，即这是不可能完成的。所以我想我的问题是，重构这个模式以允许这种排序的最佳方法是什么？我更愿意继续分离关注点，即，dynamicValue() 是子小部件的关注点，代码应该反射(reflect)这一点。

已解决:接受的答案有一些有用的线索。特别是在子指令范围内使用双向绑定(bind)以及在模型和 DOM 上进行排序的建议。我必须添加$watch要实现这一目标，请参阅下文。如果有人可以对此进行改进，我很想听听他们的意见。

working jsfiddle

Answer 1

解决问题的 Angular 方法:

如果您想以 Angular 方式进行排序，请将排序应用于模型而不是 <tr>元素已经渲染到页面中。模型的完整相关部分唯一已知的地方是父窗口小部件的 Controller ，这就是必须进行排序的地方。

后果:

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

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>

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