最初像想要实现的是:显示如下的小星星
最初的实现方式是在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
//stars define([ '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; });
难道是使用了第三方才插件的缘故就只能改为手动启动吗?求解。。。。
相关推荐
angular-slimscroll, jquery slimscroll的Angular 指令 角 slimscroll这是一个小指令,允许在 Angular 中使用 jquery slimScroll插件( https://github.com/rochal/jQuery-slimScroll ) 。 有关slimScroll的更
angular示例angular示例angular示例angular示例angular示例angular示例angular示例angular示例angular示例angular示例angular示例
在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑。而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊。 01.Angular vs jQuery ...
jquery2.2.3和angular1.2.9
angular开发,非常经典;游戏开发必备;适合初学者到深入者
一个基于 jQuery 插件的 Angular 指令,用于重新创建 Material Design 预加载器(如收件箱中所示)。 安装 bower install angular-material-preloader --save 要求 这个包依赖于 Material-Preloader jQuery 插件来...
angular官网提供的案例,ng版本7.0,Typescript. 用的模拟数据,包含最基本的模块的写法。
angular-scrollto, 使用选择器滚动到元素的Angular 指令 角 scrollto使用选择器滚动到元素的Angular 指令。需要jQuery很快,就会有一个非jQuery版本。安装Bowerbower install angular-scrollto --saveNPM
angular-isotope, 轻松使用JQuery同位素的AngularJS指令 角同位素用于JQuery同位素的AngularJS指令库。 集中于使用"ng重复"循环通过给定的array,轻松创建和填充一个单一的同位素项目。适用于稳定的同位素和 Angular...
angular-camera, Angular 指令,便于网络摄像头捕获 Angular 相机指令一个 Angular 指令,可以轻松地从网络摄像机中获取图片。 正在启动使用 bower install angular-camera 通过 Bower 安装在你的应用程序中加载 omr...
angular-datamaps, Datamaps的Angular 指令 Angular Datamaps注意:这个指令值的范围已经更改到 v0.1.0,以更好地使用DataMaps所使用的对象结构。在你的Angular 应用程序中提供一个 Angular 指令来包装 ...
Angular 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 、示例代码.
Visual Studio Angular4开发示例--数据显示
一个Angular指令。集成editor.md的markdown编辑器到Angular中。支持NgModel双向绑定。
角蛋白 具有Jquery自动选项卡支持的Angular OTP指令。 只需先添加Jquery库和angular js,即可在指令文件中使用它。 (c)riteshkumar
angular-photoswipe, PhotoSwipe图像库的Angular 指令 合作者希望不幸的是,我不能主动地贡献和维护这个模块。似乎有足够的兴趣继续进行,所以如果有人使用它的人愿意成为合作者,请我 Angular PhotoSwipe用于 ...
点击隐藏当用户单击目标元素以外的任何位置时执行函数的 Angular 指令。 通常用于关闭弹出窗口/对话框。
angular-bootstrap-show-errors, Bootstrap的Angular 指令以智能显示表单验证错误 Angular Bootstrap 显示错误Bootstrap 3的Angular 指令,智能地将'有错误'类应用于无效的表单字段。查看AngularJS中正确完成的 ...
Angular-JumpStart, Angular 和 app JumpStart示例应用程序 使用app实现的 Angular这个jumpstart应用的目标是提供一个简单的方法来开始 Angular 2 ,同时也展示了几个关键的Angular 特性。 示例依赖 Angular CLI来...