jquery函数转为angular指令实现示例
来源:互联网 发布:linux查看cpu运行状态 编辑:程序博客网 时间:2024/06/05 03:55
最初像想要实现的是:显示如下的小星星
最初的实现方式是在html页面加JS脚本,但是老外不喜欢这样,一定要我们转为angular指令,所以就试试呗~
一、最初的实现方式
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport"><title>jquery评分插件jquery.raty</title><link type="text/css" rel="stylesheet" href="demo/css/application.css"><script type="text/javascript" src="demo/js/jquery.min.js"></script><script type="text/javascript" src="lib/jquery.raty.min.js"></script></head><body><div style="width:500px; margin:100px auto;"> <div id="function-demo1" class="target-demo"></div></div><script type="text/javascript"> $(function() { $.fn.raty.defaults.path = 'lib/img'; $('#function-demo1').raty({ number: 5,//多少个星星设置score: 3,//初始值是设置targetType: 'number',//类型选择,number是数字值,hint,是设置的数组值 path : 'demo/img', cancelOff : 'cancel-off-big.png', cancelOn : 'cancel-on-big.png', size : 24, starHalf : 'star-half-big.png', starOff : 'star-off-big.png', starOn : 'star-on-big.png', cancel : false, targetKeep: true, precision : false,//是否包含小数 }); }); </script>
二、改成angular指令形式(使用了requireJS)
说明:我这里使用了第三方的插件jquery.raty.min.js(评分插件),它是要依赖于jquery的。
directive.js
//starsdefine([ 'angular','raty' ], function(angular) { var directives = angular.module('directives', []); directives.directive('showStars', function() { return { restrict : 'A', controller : [ '$scope', '$element', '$timeout', function($scope, $element, $timeout) { $timeout(function() { $.fn.raty.defaults.path = 'img'; $($element).raty({ number : 5, score : 3, half : false, size : 30 }); }, 100); } ] }; }); return directives;});
三、RequireJS中一般都有个main.js的文件作为启动点,这里也不例外
main.js
//配置依赖require.config({ paths: { "angular":"angular", "jquery":"jquery.min", "raty":"jquery.raty.min" }, shim:{ "angular": { "deps":[], "exports": "angular" }, "jquery":{ "deps":[], "exports": "jquery" }, "raty":{ "deps":["jquery"], "exports": "raty" } } });//手动启动对应模块require([ 'angular', 'controller', 'directive' ], function(angular) { angular.bootstrap(document, [ 'HelloCtrls', 'directives']); });
注意:在这里我使用的是手动启动的方式,html页面中去掉ng-app指令 ,改为自动启动如下:
define([ 'angular', 'controller', 'directive' ], function (angular) { angular.module('HelloModel', ['HelloCtrls','directives']); return { angularModules: [ 'HelloModel' ] }; });
但,不幸的是,改为自启动的时候总是说无法实例化HelloModel(页面中我加了ng-app="HelloModel")我怀疑是js文件的加载顺序,但是后来发现么有什么问题啊,特别纠结,现在仍然未能解决,如果有人能告诉我原因不胜感激!
四、页面中使用上述自定义指令
index.js
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="js/require.js" data-main="js/main" defer async="true" ></script></head><body ng-controller="helloCtrl">{{greet}}<div show-stars ></div></body></html>
五、说明
上述的控制器与该指令无关,我就是测试用的,当然还是贴出来好些。
controller.js
define([ 'angular' ], function(angular) { var componentCtrls = angular.module('HelloCtrls', []); componentCtrls.controller('helloCtrl', [ '$scope',function($scope) { $scope.greet = "hello world"; } ]); return componentCtrls;});
难道是使用了第三方才插件的缘故就只能改为手动启动吗?求解。。。。
1 1
- jquery函数转为angular指令实现示例
- Angular指令与Jquery结合
- angular jquery实现用户表
- 用angular的指令实现页码组件
- angular指令:实现复制到剪贴板功能
- angular指令
- angular指令
- angular指令
- Angular 指令
- angular指令中的preLink函数和postLink函数
- Angular JQuery 实现简单快递管理界面
- angular指令中link函数 参数实例详解
- Angular自定义指令实现一般性的表单验证
- angular自定义指令实现元素可任意移动
- angular.js指令集实现模态框拖动效果
- angular.js 指令集实现模态框拖动(3)
- jquery的find函数示例!!
- 【jQuery】jQuery实用工具函数 —— 示例
- android-关于Resources的理解。
- malloc/free与new/delete的区别
- oracle sqlplus 常用命令大全
- zoj 2967 Colorful Rainbows求不被覆盖的直线数(贪心)
- Think Python:Chapter 2:Variables(变量), expressions(表达式) and statements(陈述) 的笔记
- jquery函数转为angular指令实现示例
- 关于Mac下php学习环境的搭建
- javascript 混合的构造函数和原型方式,动态原型方式
- mysql 取出最后一条记录中某个字段值
- 外部排序相关算法知识
- python django的cache配置
- JIT注册表设置位置
- XUtil学习之DBUtil(六)
- ios数组最大值,最小值,平均值,和的快速算法