00.混亂的前端界
Angular1.x確實是個學習成本很高的框架，剛開始實習那會兒，前端啥也不懂，工頭說用Angular，我們這群小弟也只能硬著頭皮學。在這之前，前端的東西大部分都用的jQuery，而Angular正好是和jQuery的思維是相反的，開發過程中遇到了不少坑。而Angular團隊也放棄了1.x開始開發和React神似的2.0版本，唉，真是滄海桑田啊。
01.Angular vs jQuery
Angular模塊化和解耦的思路確實值得一學，但是相對于成熟的jQuery插件庫，Angular就顯得寒酸了不少，比如，Angular-UI中日期控件是這樣的：
丑的不要不要的，還不能選時間，相比之下jQuery就有很多優秀的控件了比如這樣的：
此插件傳送門： 10.干貨 下面是一個Demo，比較兩者的不同，注意右邊ng-bind的屬性使用adapter是會同步變化的↓ Demo傳送門：http://xiazai.VeVB.COm/201701/yuanma/angular.DatetimePicker_jb51.rar 寫這個指令過程中遇到了一個大坑，查了很久才明白，Angular初始化一個ngModel的時候，是會先給它的value置為NaN，初始化必須要先調用$watch()來監測真正值被設置的時候，然后調用上面的initialize方法來設置view值。否則在Controller中設置的初始值會變成NaN。 11.不足之處 原插件是有很多可選項的，我只實現了一個最基本的format，有其他需求的自行改代碼吧。可以利用第三個attrs參數獲取屬性，然后調用原插件的配置方法，來實現更復雜的邏輯。 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。angular.module("directives",[]).directive("datetimepicker",function(){ return { restrict: "EA", //指令作用范圍是element或attribute require : "ngModel", //控制器是指令標簽對應的ngModel link: function (scope, element, attrs, ctrl) { var unregister = scope.$watch(function(){ //關鍵點，下面詳述 $(element).append("<input id='date-"+attrs.dateid+"' style='border:none;width:100%' value='"+ctrl.$modelValue+"'>"); //template用不好，于是用這個笨辦法加上input標簽 element.on('change', function() { //注冊onChange事件，設置viewValue scope.$apply(function() { ctrl.$setViewValue($("#date-"+attrs.dateid).val()); }); }); element.on('click',function(){ //click觸發日期框 $("#date-"+attrs.dateid).datetimepicker({ format : attrs.format || 'Y/m/d h:i', //格式 onClose : function(){ //關閉日期框時手動觸發change事件 element.change(); } }); }); element.click(); //第一次綁定事件，模擬一次click，否則肯能要點兩下才會出日期框 return ctrl.$modelValue; }, initialize); function initialize(value){ //下面再說 ctrl.$setViewValue(value); unregister(); } } }});
新聞熱點
疑難解答
