列表分隔符文本未更新

Question

我正在构建一个Ionic应用程序，其中包含使用“项目分隔符”分割的列表

我遇到的问题是，当我使用应用程序中的按钮更改列表顺序等时，分隔符文本不会改变。

分隔符文本项在Angular指令中生成。

我觉得好像问题是单击按钮时没有重新调用该指令。

以下是列表和指令的代码。

我还创建了一个可以使用的codepen，如果这样可以让事情变得更容易。

以下是CODEPEN LINK

请注意，当您使用搜索栏然后删除列表确实更新的单词

  

列表的HTML / Ionic标记

<ion-list id="list">
  <ion-item 
            auto-list-divider 
            auto-list-divider-value="{{item[dividerString]}}" 
            auto-list-divider-function="dividerFunction" 
            ng-click="setDataSetClick(item.marker)" 
            ng-href="#/tab/films/{{item.id}}" 
            ng-repeat="item in outputData | filter:search.string | orderBy:dividerString:true">
    <!-- If Film data show title p -->
    <h3 ng-if="item.marker=='film';">{{item.title}}</h3>
    <!-- If Cinema data show title p -->
    <h3 ng-if="item.marker=='cinema';">{{item.cinema}}</h3>
  </ion-item>
</ion-list>

  

角度控制器

.controller('ListCtrl', function($scope, $timeout, $ionicScrollDelegate, Films, Cinemas, FilterList, OrderList, DataSetString, $ionicActionSheet) {
  'use strict';
  var cachedFilmData = Films.all(),
    cachedCinemaData = Cinemas.all(),
    indexedFilms = [];

  $scope.dividerFunction = function(key) {
    return key;
  };

  $scope.search = {
    string: ''
  };
  $scope.dividerString = "year";
  $scope.outputData = cachedFilmData;
  $scope.filterString = FilterList.getFilter();
  $scope.orderString = OrderList.getOrder();

  $scope.itemsToFilter = function() {
    indexedFilms = [];
    return $scope.outputData;
  };

  $scope.filterFilms = function(films) {
    var uniqueFilm = indexedFilms.indexOf(films[$scope.dividerString]) === -1;
    if (uniqueFilm) {
      indexedFilms.push(films[$scope.dividerString]);
    }
    return uniqueFilm;
  };

  $scope.setDataSetClick = function(data) {
    DataSetString.setString(data);
  };

  // When the filter by button is clicked
  $scope.showFilterActionSheet = function() {
    $ionicActionSheet.show({
      buttons: [{
        text: 'Film'
      }, {
        text: 'Cinema'
      }],
      titleText: 'Select A Filter',
      cancelText: 'Cancel',
      buttonClicked: function(index, obj) {
        FilterList.setFilter(obj.text);
        $scope.filterString = FilterList.getFilter();
        if ($scope.filterString === "Cinema") {
          $scope.outputData = cachedCinemaData;
          $scope.dividerString = "opened";
          DataSetString.setString('cinema');
        } else {
          $scope.outputData = cachedFilmData;
          $scope.dividerString = "year";
          DataSetString.setString('film');
        }
        // Reset the order string tex
        $scope.orderString = "Date";
        return true;
      }
    });
  };

  // When the order by button is clicked
  $scope.showOrderActionSheet = function() {
    var activeDataSet = DataSetString.getString();
    var optOne, optTwo, optThree;
    if (activeDataSet === "cinema") {
      optOne = "Opened";
      optTwo = "Closed";
      optThree = "Highlights";
    } else {
      optOne = 'Date';
      optTwo = 'Themes';
      optThree = 'Highlights';
    }
    $ionicActionSheet.show({
      buttons: [{
        text: optOne
      }, {
        text: optTwo
      }, {
        text: optThree
      }],
      titleText: 'Select An Order',
      cancelText: 'Cancel',
      buttonClicked: function(index, obj) {
        var orderText = obj.text,
          divider;
        if (activeDataSet === "cinema") {
          if (orderText === "Opened") {
            divider = "opened";
          }
          if (orderText === "Closed") {
            divider = "closed";
          }
          if (orderText === "Highlights") {
            divider = "highlight";
          }
          sortData(cachedCinemaData, divider);
        } else {
          if (orderText === "Date") {
            divider = "year";
          }
          if (orderText === "Themes") {
            divider = "theme";
          }
          if (orderText === "Highlights") {
            divider = "highlight";
          }
          sortData(cachedFilmData, divider);
        }
        $scope.orderString = obj.text;
        $ionicScrollDelegate.scrollTop(true);
        return true;
      }
    });
  };

  function sortData(data, divider) {
    $scope.outputData = [];
    var newOutputData = [];
    for (var i = 0; i < data.length; i += 1) {
      if (data[i][divider] != 0) {
        console.log(divider);
        newOutputData.push(data[i]);
      }
    }
    $scope.outputData = newOutputData;
    $scope.dividerString = divider;
  }
})

  

Angular Directive

.directive('autoListDivider', function($timeout) {
  var lastDivideKey = "";
  return {
    link: function(scope, element, attrs) {
      var key = attrs.autoListDividerValue,
        doDivide;

      doDivide = function() {
        var divideFunction = scope.$apply(attrs.autoListDividerFunction),
          divideKey = divideFunction(key);
        if (divideKey !== lastDivideKey) {
          element.prepend(
            '<h2 class="item item-divider custom--item-divider"><span ng-bind="divideKey">' + divideKey + '</span></h2>'
          )
        }
        lastDivideKey = divideKey;
      };

      $timeout(doDivide, 0);
    }
  };
})