查看不從指令功能更新

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

我得到的Sortable，Setting order，Fetching &數據對象都正確console.log的。

正如你可以看到它在2個服務要求獲得數據和提交數據，他們有點過於龐大這裏要投入，但這裏的地方被點擊的標題我的HTML的一部分：

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

我希望這會有道理。讓我知道是否還有其他可能需要的東西。

非常感謝提前！

編輯=====

下面是一些HTML的呈現數據的請求被刷新：

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

Answer 1

我認爲問題是，有你的指令沒有關係和presentData陣列。通常你會傳遞presentData數組作爲你的指令的參數，創建一個雙向綁定。通過這種方式，指令中的每個變量都將傳遞給控制器​​中的變量。這不是必要的，但它也可以創建一個帶有thead部分的模板並創建一個標籤指令，但這不在答案的範圍內

您應該能夠通過這種方式解決問題，但要有一個100％正確的答案你需要知道你的代碼的正確結構（如果該指令是不是你的控制器內它不會工作）：

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