看起来很简单,但是你如果真的使用了这个指令,你就会发现它根本不起效果。在仔细查看文档后,我才发现这实际是先知们使用jquery的blur方法实现的函数(而且事实上根本没有真正实现并放在当前的版本里)。那么就算我们想写一个,离开jquery原生库是不行的,因为blur方法并未封装到angularjs内带的jquery lite里。换句话说,必须先载入完整的jquery才能使用。于是,我干脆自己写了一个标签:
/* * angular directive onBlur * * @description my ng-blur * @require jquery */ $compileProvider.directive('onBlur', function() { return { restrict : 'A', link : function(scope, elm, attrs) { elm.bind('blur', function() { scope.$apply(attrs.onBlur); }); } }; });
这已经很好了。
但是还不够完美。由于$apply方法接受函数的问题,所以直接像上面这样写,有可能导致angularjs运行时报错:$apply already in progress
避免这个问题的发生,则需要对$apply方法进行加工:
/* factory function safeApply * * @description If you find yourself triggering the '$apply already in progress' error while developing with Angular.JS * (for me I find I hit most often when integrating third party plugins that trigger a lot of DOM events), * you can use a 'safeApply' method that checks the current phase before executing your function. * * @param scope, the action scope, mostly is the topmost controller * @param fn, the function which you want to apply into scope * @see https://coderwall.com/p/ngisma */.factory('safeApply', function($rootScope) { return function(scope, fn) { var phase = scope.$root.$$phase; if (phase == '$apply' || phase == '$digest') { if (fn && ( typeof (fn) === 'function')) { fn(); } } else { scope.$apply(fn); } } });
那么之前的onblur标签,就应该改为:
/* * angular directive onBlur * * @description my ng-blur * @require jquery */ $compileProvider.directive('onBlur', function(safeApply) { return { restrict : 'A', link : function(scope, elm, attrs) { elm.bind('blur', function() { safeApply(scope, attrs.onBlur); }); } }; });
以上代码我已经加入了自己的angular_extend模块,在自己的项目中使用了,效果很好。
将jquery 插件用angularjs的方式封装成组件的例子
icheck是一个jquery插件,用于跨浏览器美化Checkbox和Radio按纽。关于它的介绍,在
一般来说,它的使用方法是在dom载入后加一段jquery代码:
$('input').iCheck({ labelHover : false, cursor : true, checkboxClass : 'icheckbox_square-blue', radioClass : 'iradio_square-blue', increaseArea : '20%' });
但是既然要放在我们的项目里,就不能到处塞这种直接操作dom的jquery代码,既不美观,也不易维护。按照之前所说的原则,最好将其封装成angular指令的模式,放在公共模块里来调用。这里我将我新建的指令命名为ng-icheck。如此,我们只要写在某个checkbox或者radio的html标签里加上一句ng-ickeck即可。具体实现如下:
/* * angular directive ng-icheck * * @description icheck is a plugin of jquery for beautifying checkbox & radio, now I complied it with angular directive * @require jquery, icheck * @example <input type="radio" ng-model="paomian" value="kangshifu" ng-icheck> * <input type="checkbox" ng-model="mantou" ng-icheck checked> */ $compileProvider.directive('ngIcheck', function($compile) { return { restrict : 'A', require : '?ngModel', link : function($scope, $element, $attrs, $ngModel) { if (!$ngModel) { return; } //using iCheck $($element).iCheck({ labelHover : false, cursor : true, checkboxClass : 'icheckbox_square-blue', radioClass : 'iradio_square-blue', increaseArea : '20%' }).on('ifClicked', function(event) { if ($attrs.type == "checkbox") { //checkbox, $ViewValue = true/false/undefined $scope.$apply(function() { $ngModel.$setViewValue(!($ngModel.$modelValue == undefined ? false : $ngModel.$modelValue)); }); } else { // radio, $ViewValue = $attrs.value $scope.$apply(function() { $ngModel.$setViewValue($attrs.value); }); } }); }, }; });
在以上代码中值得注意的是:使用了icheck插件后,会生成一个美化过的div覆盖在原来的checkbox或者radio之上,而原来的checkbox或者radio会被影藏。故而,当我们点击它们时,不会直接触发事件,使得绑定到checkbox或者radio上的model值改变。所以我们这里需要重新绑定事件,使用
$ngModel.$setViewValue() 方法来给model赋值。具体逻辑,则相根据checkbox和radio而不同。详见以上代码。
由于以上代码写在我的项目中的通用模块common_angular_component.js里,故而在调用了该通用模块的页面里,直接使用ng-icheck指令即可实现ickeck的美化效果,同时避免了大量重复的jquery代码的出现。