查看不从指令功能更新

我试图从表中的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>

来源

2016-03-07 Dan Hodson

尝试使用'sort.presentData'而不是'display.presentData'。我不确定你的HTML的位置，但是你需要改变变量名或者在你的控制器的presentData和你的指令的presentData之间建立一个双向绑定，在第二种情况下它需要一个更复杂的答案 – valepu

缺少一些东西：要么在指令中指定一个模板。或者使用作用域继承为了注入像ng-repeat这样的新变量，用$ index – Walfrat

感谢@valepu，但是改成'sort.presentData'并没有解决这个问题。所以我认为这可能是更复杂的第二选择。 –

我认为问题是，有你的指令没有关系和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 
      }; 
}]);

来源

2016-03-07 14:56:25 valepu

查看不从指令功能更新

回答

相关问题