在這幾個(gè)月里，一直一邊學(xué)習(xí)angular，一邊重新把我們公司的后臺(tái)重寫。想象確實(shí)是美好的，但是時(shí)間起來真是苦難重重，不過功夫不負(fù)有心人，終于寫出一點(diǎn)靠譜的東西，而且應(yīng)用到實(shí)踐上，就一個(gè)字，爽！！以前費(fèi)半天勁想寫一個(gè)界面，還得考慮這個(gè)，還得考慮那個(gè)，真是費(fèi)死勁了?，F(xiàn)在似乎問題迎刃而解了，當(dāng)然，在用angular的前期還是要廢掉很多的腦力的，畢竟真的入門門檻有點(diǎn)高（主要對于我這種學(xué)渣來說，英語就是最大的障礙）。好了，廢話不多說開始整。
一、為什么要這幾個(gè)一起說？
因?yàn)槲以趧?chuàng)建統(tǒng)一的filter時(shí)，就發(fā)現(xiàn)，哦~~原來還可以這么搞，確實(shí)省了不少代碼。當(dāng)然你要是處女座的話，我覺得你可以分開寫，只要注入就好了。反正對于我來說都是自己寫的指令，就暫時(shí)放在一起嘍。
書歸正題，首先這個(gè)地方我覺得還少了checkbox，但是目前沒有實(shí)踐，等實(shí)踐完了再把這塊內(nèi)容補(bǔ)上。
先說說大體思路，我們首先為我們需要的枚舉來建一個(gè)factory，然后用這個(gè)factory來指導(dǎo)自定義的radio，select ，filter。當(dāng)然，這只是我的一點(diǎn)淺見。
好了，下面說干就干。
二、實(shí)踐部分（我覺的直接上代碼比較容易，然后再講）
1. 最開始我們先建一個(gè)module（這個(gè)沒什么好講的）
- <span style="font-size:18px;">var allInput = angular.module('allInput', []);</span>
2. 新建一個(gè)我們需要的factory- <span style="font-size:18px;">allInput.factory('$status', function(){
- <span style="white-space:pre"> </span>var status = {
- <span style="white-space:pre"> </span>0: '審核拒絕',
- <span style="white-space:pre"> </span>1: '審核通過', //我故意省略2
- <span style="white-space:pre"> </span>3: '未審核',
- <span style="white-space:pre"> </span>4: '重新提交審核',
- <span style="white-space:pre"> </span>'hehe': '已封禁' //如果后端的枚舉是hehe或者什么的我們應(yīng)該也能應(yīng)付
- <span style="white-space:pre"> </span>};
-
- <span style="white-space:pre"> </span>return status;
- });</span>
- <span style="font-size:18px;">
- </span>
- <span style="font-size:18px;">//這個(gè)地方是兩個(gè)控件都要用到的公共配置</span>
- <span style="font-size:18px;"></span><pre name="code" class="javascript">allInput.factory('$defaultOption', function($status){
- return {
- status: {
- data: $status
- },
- //這個(gè)下面還可以填充好多類似于上面的東西
- removeDiff: function(a, b){
- //這塊的主要意思是b里面有的東西就要替換a
- if(a == null){
- return b;
- }
-
- if(b == null){
- return a;
- }
-
- //如果都沒有空，就返回a配置
- for (i in a){
- if(i in b){
- a[i] = b[i];
- }
- }
-
- return a;
- }
- };
- });
好了，解釋一下代碼，就是建一個(gè)factory，然后將status這個(gè)數(shù)組，用$status來表示，其實(shí)就是很簡單?。?！前面的索引數(shù)字代表的是枚舉值，后面代表的是含義，當(dāng)然，我們也可以寫成英文或者什么，并不影響什么。比如說已封禁那個(gè)。中間的2是我故意省去的，為了大家看了可以更好的舉一反三（或許對于程序員這種高智商的動(dòng)物并沒有什么卵用，anyway）
后面這個(gè)地方是我又思考了一下，粘貼在上面的，因?yàn)榭梢蕴岢鰜砉餐褂?/span>
3. 新建一個(gè)filter
- allInput.filter('status', function($status){
- return function(input){
- return input in $status ? $status[input] : '未知';
- }
- });
好了，一個(gè)合理合法的filter就這么建好了，是不是特別的開心？是不是特別的簡單，當(dāng)然，我們也可以不用引入$status，我們只要把$status那一坨放在filter的回調(diào)函數(shù)里就可以啦，呵呵呵
4. 建一個(gè)統(tǒng)一的select控件
- <span style="font-size:18px;">allInput.directive('selectInput', function($defaultOption){</span><span style="font-size:18px;">
- return {
- restrict: 'AE',
- <span style="white-space:pre"> </span>replace: ture,
- scope: {
- ngType: '@', //這個(gè)地方是為了說明這個(gè)控件到底要顯示哪個(gè)枚舉（我們可能有多個(gè)枚舉）
- myConfig: '='//這個(gè)地方可以傳入一些我們自定義的配置，這樣我們就可以不用局限于他自己的type了
- },
- //我這里寫到controller純粹是因?yàn)樗唵?，第二一點(diǎn)，我也沒有真正理解，為什么放入link是最佳實(shí)踐
- //這里的$selectOption 是我們要為了自定義的方法而用的，看到這里不明白先不要著急
- controller: function($scope, $defaultOption){</span><span style="font-size:18px;">
- //這個(gè)地方是要把真實(shí)的值傳給option做渲染
- $scope.option = $defaultOption.removeDiff($defaultOption[$scope.ngType], $scope.myConfig);
- },
- templateUrl: 'select.html'
- };
- });</span>
- <span style="font-size:18px;">
-
- //最后的最后再加一個(gè)模板，就完事兒了
-
- allInput.run(function($templateCache){
- $templateCache.put('select.html',
- ' \
- <select \
- ng-options = "key as value for (key, value) in option.data"> \
- </select> \
- '
- );
- });</span>
- <span style="font-size:18px;">引用實(shí)例 <select-input ng-type = "status" ng-model = "xxx" /></span>
做到這個(gè)地方，基本上我們我們一個(gè)select 控件就完成了, 是不是特別的簡單，想一想，每次只要添加一個(gè)factory就可以用一行代碼來創(chuàng)建一個(gè)下拉框。反正我覺得真的是大大提高了工作效率。
5. 創(chuàng)建一個(gè)統(tǒng)一的radio控件
- <span style="font-size:18px;">// 這個(gè)要提前寫，寫這個(gè)控件的時(shí)候，我真的遇到了不少麻煩，所以只能進(jìn)行一丟丟的dom操作，還希望哪個(gè)厲害的大哥可以指點(diǎn)我一下
- //然后開始擼代碼
- allInput.directive('radioInput', function($defaultOption){
- return {
- restrict: 'AE',
- replace: true,
- scope: {
- ngType: '@', //這倆跟上面一樣
- myConfig: '='
- },
- //這個(gè)地方因?yàn)槭菍慸emo，我是犯個(gè)懶，用之前select的
- controller: function($scope, $defaultOption){
- $scope.option = $defaultOption.removeDiff($defaultOption[$scope.ngType], $scope.myConfig);
- },
- templateUrl: 'radio.html'
- };
- });
-
- //這里也寫一個(gè)模板
- allInput.run(function($templateCache){
- //這個(gè)地方是我最頭疼的，因?yàn)椴荒芡絥g-model,所以我寫了一個(gè)指令來進(jìn)行dom操作
- $templateCache.put('radio.html',
- '<input ng-repeat = "(key, value) in option.data" radio-to-name type = "radio" value = "{{key}}" radio-value = "{{value}}">'
- );
- });
-
- //這個(gè)地方就是重點(diǎn)，我目前為止還不知道怎么處理，所以只能寫一個(gè)dom來操作，有大神可以指點(diǎn)我，呵呵
- allInput.directive('radioToName', function(){
- return {
- restrict: 'A',
- terminal: true, //這個(gè)地方指定優(yōu)先級(jí)最低，要讓ng-repeat指令完成之后才可以執(zhí)行
- link: function(scope, ele, attr){
- ele.after('' + attr.radioValue + '');
- }
- };
- });</span>
三 實(shí)踐效果與坑
1. 實(shí)踐效果
到了這一步，基本上沒什么好講的了，大家就可以放開了用了，下面寫幾個(gè)應(yīng)用實(shí)例
效果預(yù)覽：http://4.pandaliu.sinaapp.com/
代碼：https://github.com/sd142400/angular-input
2. 坑
基本上上面的代碼沒有看什么資料，完全就是按照之前我做項(xiàng)目的經(jīng)驗(yàn)手打了一遍，但是在用的時(shí)候大概出現(xiàn)了以下幾個(gè)坑
2.1 ng-options 這種命令，需要添加ng-model才可以生效
2.2 radio 這個(gè)控件，如果是直接$scope.xxx這個(gè)作用域會(huì)變成子作用域下，所以要用$scope.model.xxx來解決這個(gè)問題。當(dāng)然，model也可以換成別的什么
以上就是我的一些經(jīng)驗(yàn)，歡迎大神來指正。這篇文章是上周日寫的，寫到最后調(diào)試不了，我就去跑了10公里，回來就睡覺了。結(jié)果本周忙的要死，今天才抽出空來把這些代碼搞定。但是當(dāng)時(shí)遇到的一些坑確實(shí)忘記了一點(diǎn)，以后會(huì)補(bǔ)充進(jìn)來。
