AngularJS 笔记一(指令directive)

AngularJS ---诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。
版本地址：https://code.angularjs.org/

Directive (ng内置的指令)

(注：HTML5规范要求所有的用户自定义属性以”data-“开头，所以data-是符合HTML5规范的写法)

1、data-ng-app=”” ;参数值可选：指定载应用模块的名称

1)data-ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
2)所有 AngularJS 应用都必须要要一个根元素。
3)HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用

<body data-ng-app="myApp">

</body>

2、ng-init=”” ;参数值为指定要执行的变量或表达式。初始化应用时执行指定表达式创建一个变量

<div ng-app="" ng-init="myText='Hello World!'">
   <h1>{{myText}}</h1>
</div>

3、ng-bind=”” ;参数为指定要执行的变量或表达式。

<div ng-app="" ng-init="myText='Hello World!'">
    <p ng-bind="myText"></p>
</div>

4、ng-model=”” ;参数为表单域的属性名。指令绑定了 HTML 表单元素到 scope 变量中。如果 scope 中不存在变量, 将会创建它

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);   // 一切从模块化开始
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

5、ng-class=”” ; 参数为表达式返回一个或多个类名。可以是字符串，对象，或一个数组, key-value 对,key为布尔值

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>

<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
</div>

6、ng-controller=”” ; 参数为控制器的名称，指令用于为你的应用添加控制器

7、ng-hide=”” ; 参数为布尔值，指令在表达式为 true 时隐藏 HTML 元素

8、ng-href=”” ; 参数为字符串，表达式的执行结果。指令覆盖了原生的 a元素 href 属性。如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。

<div ng-init="myVar = 'http://www.angularjs.net.cn'">
    <h1>AngularJS中文网</h1>
    <p>访问 <a ng-href="{{myVar}}">{{myVar}}</a>学习!</p>
</div>

7、ng-if=”” ; 参数为布尔值，指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
   <h1>Welcome</h1>
</div>

8、ng-include=”“; 参数为可以是一个表达式，返回一个文件名。指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。默认情况下，包含的文件需要包含在同一个域名下。

<div ng-include="'myFile.html'"></div>

9、ng-list=”” ; 参数为定义分隔符，默认是逗号分隔。指令将字符串转换为数组，并使用逗号分隔。ng-list 指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在 input 上使用 ng-list 指令。

<div ng-app="">
   <input ng-model="customers" ng-list/>
<pre>{{customers}}</pre>  // output为输入框中的字符组成的数组

10、ng-non-bindable ; 无参数值，告知AngularJS无需编译该元素或其子元素

11、ng-repeat=”” ; 该指令为集合中的每项都实例化一个模块

循环中的特殊变量，包括：
$index —number 当前索引值。
$first —boolean 当循环的对象存在第一项时为true。
$middle—boolean 当循环的对象存在中间项时为true。
$last —boolean 当循环对象存在最后一项时为true。
$even —boolean 循环的对象在当前位置的”$index”(索引)是偶数则为true，否则为false。
$odd —boolean 循环的对象在当前位置的”$index”(索引)是奇数则为true，否则为false。

<div ng-controller="repeatController">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length === 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>

12、ng-show=”” ; 如果表达式为 true 则显示指定的 HTML 元素。

<input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
    <h1>Welcome</h1>
</div>

13、ng-src=”” ; 指令覆盖了元素的 src 属性。如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。ng-src 指令确保的 AngularJS 代码执行前不显示图片。

<div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">
    <img ng-src="{{myVar}}">
</div>

14、ng-style=”” ; 指令为 HTML 元素添加 style 属性。ng-style 属性值必须是对象，表达式返回的也是对象。对象由 CSS 属性和值注册，即 key=>value 对。

<body ng-app="myApp" ng-controller="myCtrl">
   <h1 ng-style="myObj">菜鸟教程</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl",      function($scope) {
    $scope.myObj = {
        "color" : "white",
        "background-color" : "coral",
        "font-size" : "60px",
        "padding" : "50px"
    }
});
</script>
</body>

15、ng-switch = “” ; 指令根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。
可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

<select ng-model="myVar">
  <option value="run">www.runoob.com
  <option value="google">www.google.com
  <option value="taobao">www.taobao.com
</select>

<div ng-switch="myVar">
  <div ng-switch-when="run">
     <h1>菜鸟教程</h1>
     <p>欢迎访问菜鸟教程</p>
  </div>
  <div ng-switch-when="google">
     <h1>Google</h1>
     <p>欢迎访问Google</p>
  </div>
  <div ng-switch-when="taobao">
     <h1>淘宝</h1>
     <p>欢迎访问淘宝</p>
  </div>
  <div ng-switch-default>
     <h1>切换</h1>
     <p>选择不同选项显示对应的值。</p>
  </div>
</div>

Angular 使用的CSS类
ng-scope —用法: angular把这个类附加到所有创建了新作用域(Scope)的HTML元素上。
ng-binding—用法: angular把这个类附加到所有通过 ng-bind 或绑定了任何数据的元素上。
ng-invalid, ng-valid —用法: angular把这个类附加到进行了验证操作的所有input组件元素上。
ng-pristine, ng-dirty —用法: angular的input指令给所有新的、还没有与用户交互的input元素附加上ng-pristine类，当用户有任何输入时，则附加上 ng-dirty.