Question

我正在尝试从表中的API中对某些数据进行排序。我知道当我在一个控制器中完成所有功能时，所有功能都可以工作，但现在我将这个问题分离出一个指令，我相信我应该这样做，这就是我遇到麻烦的地方。

通过一系列console.log我能够看到所有功能似乎都在工作，当点击标题时，新的数据集将按照我的预期返回。一旦单击表标题，它就不会使用刷新的数据更新视图。

我试过摆弄apply()和watch()，但是没有什么对我有用。

这是我指令的精简版：

angular.module('myApp')
.directive('sortOrder', [
    '$routeParams',
    'GetData',
    'SortData', 
    function($routeParams, GetData, SortData) {
        return {
            restrict: 'A',
            controller: function() {
                console.log("Sortable");
                // Set this to a variable self to avoid closure issues
                var self = this;

                // Set the module declared endpoint to a variable
                self.endpoint = $routeParams.endpoint;

                // Initially set the column sorting to Ascending
                self.sortOrder = "ASC";

                self.setOrder = function (column) {
                    console.log("Setting order");

                    GetData.getData(self.endpoint, "&orderBy[" + column + "]=" + self.sortOrder).then(function(data){
                        console.log("Fetching");
                        self.presentData = SortData.sortData(self.endpoint, data);
                        console.log(data);
                    });
                });
             },
             controllerAs: 'sort'
          };
}]);

我得到console.log，Sortable，Setting order和Fetching的所有正确的<thead data-sort-order> <tr> <th ng-repeat="header in display.headers" class="{{ header }}" ng-click="sort.setOrder(header)"><span>{{ header }}</span></th> </tr> </thead>＆＃。数据对象。

正如你所看到它调用2个服务来获取数据和显示数据，它们有点太大而无法放入这里，但这是我的HTML中点击标题的部分：< / p>

<tr ng-repeat="entries in display.presentData" class="table-row">
    <!-- Using (key, details) also allows access to the key of each object value -->
    <td ng-repeat="(key,details) in entries track by $index" class="{{ key }}">{{ details }}</td>
</tr>

我希望这是有道理的。如果您还有其他任何需要，请告诉我。

非常感谢提前！

编辑=====

这里有一些HTML要根据请求提供要刷新的数据：

QPushButton[hasIcon="true"] {
    background-color: green;
}
QPushButton[hasIcon="false"] {
    background-color: red;
}

Answer 1

我认为问题在于你的指令与presentData数组之间没有关系。通常，您将传递presentData数组作为指令的参数，从而创建双向绑定。这样，指令内变量的每次更改都将传递给控制器内的变量。没有必要，但是也可以使用thead部分创建模板并创建标签指令，但这不在答案的范围内

您应该能够以这种方式解决问题，但要获得100％正确的答案，您需要知道代码的正确结构（如果指令不在您的控制器内，它将无法工作）：< / p>

<thead data-sort-order data-present-data="display.presentData">
    <tr>
        <th ng-repeat="header in display.headers" class="{{ header }}" ng-click="sort.setOrder(header)"><span>{{ header }}</span></th>
    </tr>
</thead>

然后在你的指令中：

angular.module('myApp')
.directive('sortOrder', [
    '$routeParams',
    'GetData',
    'SortData', 
    function($routeParams, GetData, SortData) {
        return {
            restrict: 'A',
            scope: {
                presentData: "="
            }
            controller: function() {
                console.log("Sortable");
                // Set this to a variable self to avoid closure issues
                var sort = this;

                // Set the module declared endpoint to a variable
                sort.endpoint = $routeParams.endpoint;

                // Initially set the column sorting to Ascending
                sort.sortOrder = "ASC";

                sort.setOrder = function (column) {
                    console.log("Setting order");

                    GetData.getData(sort.endpoint, "&orderBy[" + column + "]=" + sort.sortOrder).then(function(data){
                        console.log("Fetching");
                        sort.presentData = SortData.sortData(sort.endpoint, data);
                        console.log(data);
                    });
                });
             },
             controllerAs: 'sort',
             bindToController: true
          };
}]);

查看不从指令功能更新

1 个答案: