Angular.js中的指令——易懂全解析 - [ 前端开发常用技巧经验记录 ] - 看云
&span style="font-family: Arial, Helvetica, sans- background-color: rgb(255, 255, 255);"&
&/span&&span style="font-family: Arial, Helvetica, sans- background-color: rgb(255, 255, 255);"&angular.js中，指令是最基础的也是最重要的工具之一。angular.js指令指的是以ng为前缀的HTML属性。在之前的ng-app、ng-model等，都属于指令。&/span&
angular.js中的基本指令包括如下内容：
1.ng-app/ng-model
ng-app指令用于声明angular,js的作用范围，ng-model用于声明模型。这些在之前都已经进行过详细介绍。
这个指令用于进行模块的初始化，一个最简单的使用方法是利用这个指令进行数据初始化，代码如下：
&div ng-app="" ng-init="cost=5"&
&p&单价： {{
cost }}&/p&
上述代码中，利用ng-init初始化了cost变量的值，在之后利用{{}}（angular中的数据绑定方式之一）进行调用。但是这种数据初始化的方式并不推荐。
这个指令可以用来进行数据绑定，它的功能就和我们之前提到的{{}}作用相同。在如下代码中，我们不用{{}}方式，而改用ng-bind指令进行数据绑定，代码如下：
&div ng-app="" ng-init="cost=5"&
&p&单价： &span ng-bind= "cost"&&/span&&/p&
4.ng-repear
ng-repeat指令用于进行反复输出，一般用于对数组的遍历，示例代码如下：
&div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"&
&p&循环对象：&/p&
&li ng-repeat="x
in names"&
{{ x.name + ', ' + x.country }}
这里对names内的所有徐对象进行遍历，并分别按照规定的模板进行输出，类似于php中的foreach语句。x in names表示将names数组中的每一个对象都赋值给x，然后输出，没循环一次进行一次这个操作，直到将数组遍历结束。
以上给出的都是AngularJS中自己预先定义的指令。我们在angular.js中还可以自己进行指令的定义，需要使用directive方法。一个简单的指令定义代码如下：
var app = angular.module("myApp", []);
app.directive("hello", function() {
template : "&h1&自定义指令!&/h1&"//tempate指定该指令渲染的模板
上面的代码中我们定义了一个hello指令，template定义了该指令的模板，即我们使用这个指令时，需要在html中呈现出什么样的内容。定义好指令后，就可以像之前一样进行调用了。
上面对指令的调用只给出了作为html属性的调用方式。其实angular.js中提供了四种进行指令调用的方法。它们分别为元素名调用、属性调用、类名调用和注释调用。它们的形式如下（按顺序）：
&runoob-directive&runoob-directive&
&div runoob-directive&div&
&div class="runoob-directive"&div&
angular中，为了更清楚的表示这四种调用，每个调用都为其设定了一个英文字母的标识，用于在指令定义时限定它们的被调用方式，分别为：
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
下面的例子说明了如何在定义指令时使用这些限制：
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
restrict : "A",
template : "&h1&自定义指令!&/h1&"
当然，这些标识也可以放在一起使用，默认的restrict为EA，表示可以元素名调用或者属性调用。
页面正在加载中»»25个超有用的 AngularJS Web 开发工具
　　AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，改善了JavaScript。
　　下面我要说的就是25个超有用的AngularJS工具，web开发人员千万不可错过哦。
　　1）AngulaJS最佳测试工具&&Protractor
　　Protractor支持AngularJS应用程序，是一款终端到终端的测试框架。Protractor在真正的浏览器中运行测试。由于Protractor支持Angular的具体定位策略，故而你无需进行任何设置就可以测试特定的Angular元素。
　　官方网站：
　　2）AngularJS测试框架&&Jasmine
　　Jasmine对于JavaScript用户而言，也是一款测试框架。这也是一个DOM较少的JavaScript框架，它适合所有的Node.js项目和网站，并且在任何地方运行都是免费的。
　　官方网站：
　　3）支持AngularJS的IDE&&Webstorm
　　WebStorm的智能代码编辑器为JavaScript、Node.js、HTML和CSS，以及它们的接替者提供了一流的支持。WebStorm可以很好地处理现流行的web技术，提供一流的AngularJS支持。
　　官方网站：
　　4）AngularJS最佳框架&&Angular fire
　　firebase是用于轻松构建Web和移动应用程序的系列库，也是强大的框架。它能为JavaScript用户提供Angular Fire框架。
　　官方网站：
　　5）AngularJs测试工具&&karma
　　karma也是一款非常盛行的测试框架，用于JavaScript应用程序，它还能为开发人员提供测试环境。
　　官方网站：
　　6）最佳AngularJS工具&&Mochajs
　　Mocha是一款运行在Node.js和浏览器上，功能丰富的JavaScript测试框架，它能够使得异步测试变得简单而有趣。Mocha测试运行持续，在映射未捕获的异常到正确的测试案例的同时，允许灵活和准确的报告。
　　官方网站：
　　7）最好的代码编辑器&&SublimeText
　　这是开发人员最喜欢的文本代码编辑器之一。
　　官方网站：
　　8）最佳的AngularGrid&&Angular Deckgrid
　　Angular Deckgrid是轻量级的网格，支持AngularJS。免费下载。它的指令不依赖于视觉表现。所有的响应能力和美感来自于你的CSS文件。
　　官方网站：
　　9）实用的AngularJS服务&&Restangular
　　Restangular是一个AngularJS的服务，通过最少的客户端代码简化了常用的GET、POST、DELETE和UPDATE请求。
　　官方网站：
　　10）支持Chrome的AngularJS扩展&&ng Inspector
　　ng Inspector支持Chrome和Safari浏览器，可协助你开发、调试和理解AngularJS应用程序。
　　官方网站：
　　11）Angular GetText
　　Angular&gettext为AngularJS提供超级简单的翻译支持。只要用英语写下来，标注要翻译的部分，剩下的就交给它好了。
　　12）Angular框架&&AngularUI
　　AngularUI是AngularJS框架。
　　官方网站：
　　13）Yeoman Generator Angular
　　支持AngularJS的Yeoman Generator&&能让你快速建立具有合理默认值和最佳实践的项目。
　　官方网站：
　　14）djAngular
　　这是一个可重复使用的应用程序，提供了更好的应用程序集成。 Djangular允许你创建AngularJS内容的app，而不是包含了Django的单一庞大的AngularJS应用程序。
　　官方网站：
　　15）Ment.io
　　Mentions和Macros部件基于AngularJS，但并不依赖jQuery。
　　官方网站：
　　16）Angular&Kickstart
　　想要加快你的AngularJS开发吗？那么此完整的、可扩展的构建系统的项目支架一定适合你。
　　官方网站：
　　17）ng book
　　当我们在构建大型的Angular应用程序时，总是难以避免经常性地碰到那些看似难以发现和解决令人头疼无比的问题。这时，ng book就上场了。
　　官方网站：
　　18）MeanIO
　　Mean是用于构建Web应用程序的简单却强大的JavaScript框架。
　　官方网站：
　　19）Code Orchestra
　　COLT是一款前端开发工具，它允许点播式编写代码。当你修改代码保存之后，它可以通过特殊的协议，将改变传达给正在工作中的应用程序。支持AngularJS。
　　官方网站：
　　20）Angular Seed
　　这是一个支持典型AngularJS Web应用程序的应用程序骨架。你可以用它来快速引导你的angular&web应用项目，和支持这些项目的开发环境。
　　官方网站：
　　21）LUMX
　　基于AngularJS和Google Material Design规范的第一个响应前端的框架。对任何一个Web应用程序都非常重要。这也是为什么我们只使用jQuery，而无需它的任何插件。每个部件之后都可以被自制成完美地插入到AngularJS应用程序中。
　　官方网站：
　　22）ng Docs
　　官方网站：
　　23）AngularJS Batarang
　　支持Chrome的AngularJS WebInspector扩展。
　　官网网站：
　　24）Videogular
　　这是一款支持AngularJS的HTML5视频播放器。 Videogular用AngularJS开发，在用于项目时，你必将会被它的魅力所倾倒。
　　官方网站：
　　25）NG Table
　　官方网站：
　　英文原文：&翻译：
验证消息：Admin10000
提示：更多精彩内容关注微信公众号：全栈开发者中心（admin10000_com）
理智评论文明上网，拒绝恶意谩骂 发表评论 / 共1条评论
登录会员中心AngularJS常用插件与指令收集
原文：&使用AngularJS有差不多一年时间了，前前后后也用了不少库和指令，整理了一下，分成四大类列出。有demo地址的，就直接连接到demo地址，其它的直接链到github托管库中。图片视频类 图片墙效果插件，可以将图片组织成类似于瀑布流的效果，依赖于jQuery、和 另一个照片瀑布流解决方案
图片剪裁工具 播放器，直接播放指定地址的mp4，控制按钮美观度远甩朝内99.99%的视频站输入控件类 控制元素拖动的控件， 百度umeditor的AngularJS扩展，umeditor从界面上讲并不够现代化，但却总有人喜欢它 喜闻乐见的自动补完 文本编辑器，更简洁，更漂亮 以标签的方式来组织输入 以拖动方式输入值的控件 与Angular-slider功能一样，只不过设计风格不一样界面类 官方扩展，在AngularJS中方便的以指令的方式使用 用于在页面中集成Google Maps 官方提供的表格插件，支持表格的主题、排序、直接编辑、多行选择等操作，而且使用非常简单，只需要一行HTML代码，但是，比较难看，适合于不讲究外观但要求功能强大的场合，像后台工具、管理系统之类 第三方表格工具，适合于需要对表格进行高度定制的场合 在易用性和外观上对上面两个进行折衷的解决方案 上面的ui-bootstrap、ui-map就是它的一部分，官方提供的常用扩展集，除了这两个，还有ui-router、ui-select等，注意，它使用的是Bootstrap 2.x 第三方Bootstrap插件，而且是基于扁平化的Bootstrap 3，更美观 风格的AngularJS指令，Material Design设计，值得尝试 可用于在页面顶部增加一个漂亮的进度条 与Angular Loading Bar有点类似，主要用于处理$http通信时候的动画 从名字可以看出来，它是一个用于组织瀑布流和时间线的扩展 页内滚动工具，可以将页面滚动到指定id的元素位置 比Bootstrap更简单，更好用，更漂亮的网页对话框 树状目录组织扩展，使用相当方便，而且不依赖于jQuery 用于在页面上显示警告框，可以设置显示时间，还可以直接显示$http中收到的警告 当文字过多过长时，显示部分文字的插件，可以按文字总长度来控制，也可以按单词数量来控制其它工具类 AngularJS的i18n扩展 可以方便的在AngularJS中集成第三方账号登陆，支持国际主流社交网站账号，支持协议有OAuth 1.0/2.0 本在存储插件，用于处理localStorage和sessionStorage 导出csv的扩展
上一篇： 转自： q.com/cn/articles/node-js-and-io-js 去年12月，多位重量级Node.js开发者不满Joyent对Node.js的管理，自立门户创建了io.js。io.js的发展速度非常快，先是于2015年1月份发布了1.0版本，并且很快就达到了2.0版本，社区非常活跃。而 最
下一篇： React自诞生以来，一直以其渲染速度快著称，特别与AngularJS和EmberJS等相比更是如此。但也有人不同意这个观点，以色列软件开发公司500Tech的CEO Boris Dinkevich 近日发表 博文 称，其实React并不真正比AngularJS快。 React之所以被人们认为快的原因，是因angularjs（2）
* @name myToggle
* @module index
* @restrict E
(function () {
'use strict';
var jqLite = angular.element,
forEach = angular.forEach;
angular.module('index.directive', [])
.directive('myToggle', IndexDirective);
function IndexDirective() {
var obj = {
restrict: 'E',
replace: true,
require: '?ngModel',
transclude: true,
template: '&div class="item item-toggle"&' +
'&div ng-transclude&&/div&' +
'&label class="toggle"&' +
'&input type="checkbox"&' +
'&div class="track"&' +
'&div class="handle"&&/div&' +
'&/div&' +
'&/label&' +
compile: function (element, attr) {
var input = element.find('input');
'ng-model': attr.ngModel
}, function (value, name) {
input.attr(name, value);
return function ($scope, $ele) {
var checkbox = $ele[0].getElementsByTagName('input')[0];
var ngModelController = jqLite(checkbox).controller('ngModel');
jqLite(checkbox).on('change', checkbox_change);
if ($scope.user.open) {
checkbox.checked = true;
checkbox.checked = false;
function checkbox_change() {
if (ngModelController) {
ngModelController.$setViewValue(checkbox.checked);
$scope.$apply();
display: inline-block;
pointer-events:
margin: -5
padding: 5 }
.toggle input:checked + .track {
border-color: #4cd964;
background-color: #4cd964; }
.toggle input {
display: none; }
.toggle .track {
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: background-color,
transition-property: background-color,
display: inline-block;
box-sizing: border-box;
height: 31
border: solid 2px #e6e6e6;
border-radius: 20
background-color: #fff;
content: ' ';
pointer-events: none; }
.toggle .handle:before {
left: -21.5
padding: 18.5px 34
content: " "; }
.toggle input:checked + .track .handle {
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
background-color: #fff; }
.item-toggle .toggle {
z-index: 3; }
.toggle input:disabled + .track {
opacity: 0.6; }
.toggle .handle {
-webkit-transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1);
transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1);
-webkit-transition-property: background-color,
transition-property: background-color,
height: 27
border-radius: 27
background-color: #fff;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15); }
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：14149次
排名：千里之外
原创：52篇
(1)(1)(3)(3)(1)(4)(4)(5)(9)(11)(10)