最初像想要实现的是：显示如下的小星星
最初的实现方式是在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中封装一个jQuery的日期时间插件，并实现双向绑定，同时也讨论了在学习和应用前端技术时可能遇到的挑战，以及如何通过创建自定义指令来解决特定问题的方法。通过这些知识点...
标题和描述中提到了使用jQuery的animate函数实现豌豆发射效果，这涉及到jQuery库中的animate函数的使用方法。jQuery是一个非常流行的JavaScript库，它提供了丰富的方法来操作DOM（文档对象模型），处理事件，以及...
总结来说，这个示例展示了如何在Angular中使用自定义指令来实现基本的拖放功能。通过监听鼠标事件，结合jQuery进行DOM操作，我们可以创建交互式的用户界面。虽然这个示例使用了jQuery，但在更现代的Angular版本（如...
总的来说，整合Angular和zTree需要对Angular的组件结构、生命周期钩子以及jQuery有一定的理解。通过正确配置和使用zTree，可以在Angular应用中创建功能丰富的树形视图，提供用户友好的交互体验。
这个示例应用程序展示了如何有效地使用Angular.js与其它技术如Rx（Reactive Extensions）、JavaScript、Web套接字、jQuery等进行集成，以创建功能丰富的交互式用户界面。 **Angular.js核心概念** 1. **双向数据...
在Angular开发中，有时我们需要在Angular的环境之外（如JavaScript的全局作用域或者第三方库）调用Angular控制器中的函数或访问其变量。本篇将详细解释如何实现这一操作，通过一个具体的示例来阐述。 首先，让我们...
在本文示例中，this.dateCallback.bind(this)确保了回调函数内部的this指向了指令的实例，从而可以访问Angular的数据和方法。 ### 知识点五：如何加载jQuery插件 本文中以jquery.daterangepicker插件作为示例，...
本示例是基于jQuery库实现的表头固定功能，它能够提供一种直观的用户体验，使得用户在浏览长表格时能轻松地识别和定位数据。 要实现表头固定，主要涉及以下几个步骤和关键知识点： 1. **HTML结构**：首先，需要...
虽然现在有许多现代化的前端框架，如React、Vue和Angular，jQuery 仍然有其独特的价值。对于简单的项目或快速原型开发，jQuery 能提供快速的解决方案，而无需引入整个框架的复杂性。 通过这个“jQuery例子大全”，...
在本篇文章中，我们将探讨如何使用jQuery和AngularJS这两种流行的JavaScript库来实现百分比进度条。 首先，让我们了解jQuery的实现方式。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互...
为了使这个指令更具有Angular风格，博主可能还会讨论如何通过指令的属性传递配置选项，并在`link`函数中使用`attrs.$observe`或`$watch`来响应这些变化。 此外，博主可能会讲解如何处理日期和时间的模型绑定，确保...
首先，jQuery的`draggable()`函数是实现拖拽功能的核心。当你对一个元素调用这个函数，它就会变得可拖动。例如： ```javascript $("#myElement").draggable(); ``` 在这里，`#myElement`是你要使其可拖动的元素的...
在这个"JavaScript+jQuery网页特效设计实例源码"的压缩包中，我们很可能会找到一系列实用的代码示例，帮助开发者理解和实现各种网页特效。 JavaScript，作为一种轻量级的解释型编程语言，被广泛应用于浏览器端，...
在Angular.js这样的现代前端框架中，双向数据绑定通常是内置的功能，通过ng-model指令可以轻松实现。 在不使用Angular.js或类似的MVVM（Model-View-ViewModel）框架时，开发者必须手动编写代码来同步DOM中的数据和...
以下是一个使用`link`函数并依赖jQuery的示例指令，该指令用于实现一个固定顶部导航条的效果： ```javascript webApp.directive("detailTopStick", ["$timeout", "$window", function ($timeout, $window) { ...
- 前端实现：前端分页主要使用JavaScript、jQuery或者现代前端框架如React、Vue、Angular来实现。这些技术通过监听用户的翻页操作，向服务器发送请求获取对应页的数据，并动态更新页面内容。 - 后端实现：后端分页由...
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
类库（如 jQuery）提供了一系列函数和工具，帮助开发者编写 Web 应用程序，但最终还是需要开发者自己来组织代码的执行流程。相比之下，框架（如 Knockout 和 Sproutcore）则提供了一种更为结构化的编程模式，框架...
虽然现在有许多其他JavaScript库和框架，如React、Vue和Angular，但jQuery仍然是许多项目的基础。了解jQuery可以帮助理解现代前端技术的演变，并在需要时快速集成到现有项目中。 通过学习和实践这个`jquery.js`文件...