使用自定義角度濾波作爲一個角度不變

定義在我的角度應用程序的UI網columnDefs一個cellFilter（myApp）我有一個自定義過濾器（myFilter）和我使用的UI電網與多個網格（myGrid1，myGrid2，等）顯示我的數據在我的應用程序的各種視圖。由於許多列在多個網格上使用，因此我將它們的列定義放置在一個Angular常量中，以便在我的應用程序中使用。使用自定義角度濾波作爲一個角度不變

我沒有任何運氣使用myFilter作爲常量中列定義子集的cellFilter。你不能將一個過濾器注入一個常量中，並將常量注入到一個config（）中也不起作用（未知的提供者錯誤）。

這裏是在我的代碼看起來像一個一瞥：

angular.module('myApp', ['MyFilter']) 
    .constant('MyColumns', { 
    firstName: { 
     cellClass: 'myCellClass', 
     name: 'firstName' 
    }, 
    lastName: { 
     cellClass: 'myCellClass', 
     // cellFiler: 'myFilter', // DOES NOT WORK 
     name: 'lastName' 
    } 
    // etc. 
    }) 
    .filter('myFilter', 
    function() { 
     // leaving out what filter does for brevity 
     return; 
    } 
) 
    .controller('MyController', 
    function (MyColumns) { 
     var myData; // leaving out data for brevity 

     var myGrid1 = { 
     columnDefs: [ 
      MyColumns.lastName, 
      MyColumns.firstName 
      // etc. 
     ], 
     data: myData 
     // etc. 
     }; 
    } 
) 
    /* 
    .config(function (MyColumns) { 
    MyColumns.lastName.cellFilter = 'myFilter'; // DOES NOT WORK 
    })*/ 
;

有沒有一種方法我可以使用在不斷列定義myFilter？謝謝你的幫助！

版本：1.5.8角，UI欄3.2.6

來源

2016-11-02 Kabb5

我認爲你只是單純的有錯誤的DI名，根據文檔當您註冊一個過濾器filterName你應該<filterName>Filter

所以注入的依賴名，如果你的註冊.filter('myFilter',...你應該注入['myFilterFilter']。

來源

2016-11-02 14:54:17

在清理和修復我的問題代碼的過程中，我得到了一個工作解決方案。請看下圖：

angular.module('myApp', ['ui.grid', 'MyFilter']) 
 
    .constant('MyColumns', { 
 
    firstName: { 
 
     cellClass: 'myCellClass', 
 
     cellFilter: 'myFilter', 
 
     name: 'firstName' 
 
    }, 
 
    lastName: { 
 
     cellClass: 'myCellClass', 
 
     name: 'lastName' 
 
    } 
 
    // etc. 
 
    }) 
 
    .controller('MyController', 
 
    function(MyColumns) { 
 
     var vm = this; 
 

 
     var myData = [{ 
 
     firstName: 'Hillary', 
 
     lastName: 'Clinton' 
 
     }, { 
 
     firstName: 'Donald', 
 
     lastName: 'Trump' 
 
     }, { 
 
     firstName: 'Gary', 
 
     lastName: 'Johnson' 
 
     }]; 
 

 
     var myGrid1 = { 
 
     columnDefs: [ 
 
      MyColumns.lastName, 
 
      MyColumns.firstName 
 
      // etc. 
 
     ], 
 
     data: myData 
 
      // etc. 
 
     }; 
 

 
     angular.extend(vm, { 
 
     myGrid1: myGrid1, 
 
     myData: myData 
 
     }); 
 
    } 
 
) 
 
    .config(function(MyColumns) { 
 
    MyColumns.lastName.cellFilter = 'myFilter'; 
 
    }); 
 

 
angular.module('MyFilter', []) 
 
    .filter('myFilter', 
 
    function() { 
 
     return function(input) { 
 
     return '▢ ' + input; 
 
     }; 
 
    } 
 
);

<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" /> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
 
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
 
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
 

 
<script src="http://ui-grid.info/release/ui-grid.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyController as MyCtl"> 
 
    <div ui-grid="MyCtl.myGrid1"></div> 
 
</div>

（我也是從UI電網3.2.6至3.2.9，不知道這造成了影響升級）

來源

2016-11-02 16:33:07 Kabb5

使用自定義角度濾波作爲一個角度不變

回答

相關問題