Question

我正在使用ui-grid创建可排序的表以及分页。当我进行分页时，在后台进行服务调用，返回一组新数据，然后在表中更新。我已经为cell模板编写了一个指令，该指令检查数据对象的keyName＆＃34; context＆＃34;并且基于＆＃34; context＆＃34;的值它为细胞模板设置特定图像。问题是该指令适用于第一组记录，但是当我使用paginate获取下一组记录时，该表显示新记录，但该指令不更新单元模板的图像。我通过在指令中添加一个手表找到了解决方案，现在它按预期工作。我的问题是还有其他方法可以解决上述问题吗？

我的列定义，单元格模板有我的自定义指令＆＃34; account-type-icon＆＃34;

    {
      name:'Name',
      field: 'entityName' ,
      sort : gridDecorator.getInitialSortState(vm.metadata.sorters, 'entityName'),
      sortDirectionCycle :   ['asc', 'desc'],
      headerCellClass : 'headercell',
      cellClass : 'gridcell',
      minWidth : 300,
      enableSorting : gridDecorator.isTheColumnSortable('entityName'),
      cellTemplate : '<td><a ui-sref=""><**account-type-icon** context="row.entity.contextType"></account-type-icon> {{row.entity.entityName}}</a></td>'
    },

＆＃34;帐户类型图标＆＃34;是我的指示，

return {
  restrict: 'EA',
  replace: true,
  template: '<i></i>',
  scope: {
    context: '='
  },
  link: function (scope, iElement) {
    //console.log(scope);
    var context = scope.context;
    if (context !== undefined && typeof context === 'number') {
      var iconClass = mapContext(context);
      if (iconClass) { iElement.addClass(iconClass); }
    }

    function mapContext (context) {
      switch(context) {
        case 1:
          // accounts
          return 'glyphicons glyphicons-book';
        case 2:
          // clients
          return 'glyphicons glyphicons-user';
        case 3:
          // groups
          return 'glyphicons glyphicons-address-book';
        case 4:
          // households
          return 'glyphicons glyphicons-home';
        default:
          return false;
      }
    }
   //this watch solves my problem of icon updation
    scope.$watch('context',function(newContextValue){
      if (newContextValue !== undefined && typeof newContextValue === 'number') {
        var iconClass = mapContext(newContextValue);
        if (iconClass) {
          iElement.removeClass('glyphicons-book glyphicons-user glyphicons-address-book glyphicons-home');
          iElement.addClass(iconClass);
        }
      }
    });
  },
  controller: ['$scope',function ($scope){
      //console.log($scope);
  }]
};

还有其他优雅的方法让指令知道它需要更新单元格的图像吗？

AngularJS ui-grid和自定义指令更新

0 个答案: