AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
可以通过以下方法调用指令
元素名 <runoob-directive></runoob-directive>;
属性 <div runoob-directive></div>;
类名 <div class="runoob-directive"></div>;
注释 <!--directive:runoob-directive-->;
限制使用
你可以限制你的指令只能通过特定的方式来调用。
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用.如果设置值为"AC",则是通过属性和类名来调用指令。
restrict值可以是下面几种：
E作为元素名使用
A作为元属性使用
C作为元类名使用
M作为元注释使用
ng-style 可以使用一个结构直接来表示当前节点的样式：
<div ng-style="{wwidth:100,height:100,background:'red'}"></div>
ng-class 直接设置当前节点的类，配合数据绑定作用很大
<div ng-controller="textCtrl" ng-class="cla"></div>
ng-class-even 和ng-class-odd是和ng-repeat配合使用的
<ul ng-init="l=[1,2,3,4]">
<li ng-class-odd="odd" ng-class-even="even" ng-repeat="m in l">{{m}}</li>
</ul>
ng-show ng-hide 显示和隐藏 ng-switch 根据一个值来决定那个节点显示，其它移除
<div ng-init="a=2"> <ul ng-switch on="a"> <li ng-switch-when="1">1</li> <li ng-switch-when="2">2</li> <li ng-switch-default>other</li> </ul> </div>
ng-src控制src属性
<img ng-src="{{'h'+'ead,png'}}"/>
ng-href控制href属性
<a ng-href="{{'#'+'123'}}">here</a>
ng-form
起初不明白为什么会有个表单指令，<form>标签感觉也够用啊。
以表单验证为例，
<input type="submit" ng-disabled="mainForm.$invalid" />
也就是表单的状态为$invalid时禁用提交按钮。
如果场景再稍微复杂一点点，比如一个父表单中有多个子表单，子表单中有3个验证通过时父表单便可以提交。
但是，<form>是不可以嵌套的。
考虑到这种场景，我们便使用ng-form指令来解决这一问题。
<form name="mainForm" novalidate>
<div ng-form="form1">
姓名:<input type="text" ng-required="true" ng-model="name"/><br>
证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>
</div>
<br>
<div ng-form="form2">
监护人姓名:<input type="text" ng-required="true" ng-model="gname"/><br>
监护人证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>
</div>
<button ng-disabled="form1.$invalid && form2.$invalid">submit all</button>
</form>
ng-checked 选中状态
<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">
ng-selected 被选中状态
<label>
<input type="checkbox" ng-model="isFullStack">
I'm Full Stack Engineer
</label>
<select>
<option>Front-End</option>
<option>Back-End</option>
<option ng-selected="isFullStack">Full Stack !!!</option>
</select>
ng-disabled 禁用状态
<textarea ng-disabled="1+1==2">1+1=?</textarea>
ng-multiple 多选状态
ng-readonly 只读状态
<input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>
.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
$rootScope.stopTheWorld = true;
},3000)
})
ng-bind
ng-bind的行为和{{}}差不多，只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content)，也就是未渲染导致的闪烁。
ng-cloak
ng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏，直到路由调用对应的页面。
ng-if
如果ng-if中的表达式为false，则对应的元素整个会从DOM中移除而非隐藏，但审查元素时你可以看到表达式变成注释了。
如果相进行隐藏，可以使用ng-hide。
上面的这是只是单向绑定（ng-model除外），即只是从数据到展示，不能反作用于数据。
相关推荐
Angular.js 是一个强大的JavaScript框架，由Google维护，用于构建单页应用（Single Page Applications, SPA）。这个版本，v1.8.3，是Angular.js的一个稳定版本，它提供了丰富的功能和改进，帮助开发者构建高性能、可...
在Angular.js中，指令是构建可复用组件和复杂用户界面的核心工具。它们允许开发者扩展HTML，赋予HTML新的语义，以实现动态行为和数据绑定。这篇教程将深入讲解Angular.js指令的一些重要属性，帮助你更好地理解和应用...
**Angular.js** 是一款强大的JavaScript框架，主要用于构建强交互性的Web应用。它的核心设计理念是引入MVC（Model-View-Controller）模式到前端开发中，从而帮助开发者更高效地组织和管理代码，尤其是在处理复杂的...
在前端开发领域，AngularJS（通常简称为Angular.js）是一个非常流行且强大的JavaScript框架，由Google维护。这个框架主要用于构建动态、单页Web应用程序（SPA），它提供了丰富的功能来简化前端开发过程，包括数据...
最近一位大神问了我angular.js指令中的controller、compile与link函数的不同，想了想居然回答不出来，所以必须要深入的探究下，下面这篇文章主要介绍了关于angular.js指令中的controller、compile与link函数的不同之...
Angular.js 是一个强大的前端JavaScript框架，它提供了丰富的功能和灵活性，用于构建动态、数据驱动的Web应用程序。而WUI-DatePicker是一款基于Angular.js开发的日期选择器插件，专为提高用户体验而设计，提供了多种...
这个"angular.js-master.zip"压缩包很可能是AngularJS的源码仓库，特别是1.3版本的一个分支或特定里程碑。 AngularJS的核心特性包括： 1. **双向数据绑定**：AngularJS提供了一种机制，使得视图（View）与模型...
Angular.js 是一个强大的、开源的前端JavaScript框架，由Google维护，用于构建可维护的、高性能的Web应用程序。在这个"angular.min.v125.rar"压缩包中，包含的是Angular.js的一个特定版本——v1.2.5的压缩最小化版，...
Angular.js，由Google维护，是一个强大的前端JavaScript框架，它提供了一种声明式编程方式来构建交互式的Web应用。在这个“基于angular.js日期选择器”的项目中，我们关注的是如何利用Angular.js的强大功能来实现对...
Angular.js是一个非常流行的开源JavaScript框架，主要用于开发动态网页。对于有一定HTML和JavaScript基础的人来说，它是一个理想的选择，因为它能够帮助开发者组织JavaScript代码，创建响应式网站，并且与jQuery等...
Angular.js，作为一个强大的前端JavaScript框架，由Google维护，被广泛应用于构建复杂的单页应用（SPA）和后台管理系统。本篇将深入探讨Angular.js的核心特性、架构设计以及如何在实际项目中构建一个后台管理系统。 ...
"angular.js-master"中的示例项目可能包含了以上概念的实际应用，例如，你可以看到如何设置模块、创建控制器、定义指令，以及如何使用服务进行数据交互。通过研究这个项目，你将更好地理解和掌握AngularJS的实践用法...
在配置服务、指令等时，可以使用 `angular.copy` 创建默认配置并允许用户覆盖部分属性。 ```javascript var defaultConfig = { logLevel: 'debug', timeout: 5000 }; function getConfig(userConfig) { return ...
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS，作为一款由Google维护的前端JavaScript框架，是MVVM（Model-View-ViewModel）模式的杰出代表，以其强大的数据绑定、依赖注入和模块化功能深受开发者喜爱。在1.6.9这个版本中，我们看到对稳定性和性能的一...
Angular.js是Google维护的一个前端JavaScript框架，用于构建单页应用（SPA）。它提供了数据绑定、指令、服务、过滤器等功能，极大地提高了开发效率。在这个项目中，Angular.js可能被用来处理前端的数据展示、用户...
Angular.js 径向图指令 我认为雷达图很酷。 我也认为 Angular.js 和 d3.js 很酷，所以我决定创建一个 Angular.js 指令来创建可定制的径向图......和BLAM ，它来了！ 您可以当前功能集的演示。 我欢迎任何贡献。 ...
Angular.js是Google维护的一个前端JavaScript框架，它极大地简化了构建动态单页应用程序（SPA，Single Page Applications）的过程。WebAPI则是微软提供的一种用于构建RESTful服务的技术，常用于后端数据交互。 **...