指令(directives)

綁定

[ng-app]

ng-app 指令定义了 AngularJS 应用程序的 根元素。告诉 AngularJS，div元素是 AngularJS 应用程序 的"所有者"。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-app 可以通过一个值（比如 ng-app="myModule"）连接到代码模块。

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

<div ng-app="">
  <input type="text" ng-model="firstName">
  <p>顯示 ng-model="firstName" = {{firstName}}</p>
  <p>也可以這樣顯示 <span ng-bind="firstName"></span></p>
</div>

html5用data擴充

<div data-ng-app="" data-ng-init="firstName='John'">
  <input name="firstName" data-ng-model="firstName">
  <p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>

[ng-controller]

定义应用的控制器对象

[ng-model]

  • 绑定 HTML 元素到应用数据
  • 为应用程序数据提供类型验证（number、email、required）。
  • 为应用程序数据提供状态（invalid、dirty、touched、error）。
  • 为 HTML 元素提供 CSS 类。
  • 绑定 HTML 元素到 HTML 表单。

[ng-model-options]

规定如何更新模型

[ng-init]

ng-init 指令为 AngularJS 应用程序定义了 初始值。

多變數用「;」區隔

使用 ng-init 不是很常见。 大多使用controller的 $scope.XXX= "Doe";來初始化

<div ng-app="" ng-init=
  "firstName='weiwei';
  phone='0911111111';
  myobj={firstName:'John',lastName:'Doe'};
  mylist=[1,2,3];"
>
  <input type="text" ng-model="firstName">
  <input type="text" ng-model="phone">
  <p>顯示 ng-model="firstName" = {{firstName}}</p>
  <p>也可以這樣顯示 <span ng-bind="firstName"></span></p>
  <p>顯示 ng-model="phone" = <span ng-bind="phone"></span></p>
</div>

[ng-bind]

绑定 HTML 元素到应用程序数据

[ng-bind-html]

绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符

[ng-bind-template]

规定要使用模板替换的文本内容

[ng-form]

指定 HTML 表单继承控制器表单

[ng-include]

在应用中包含 HTML 文件

[ng-jq]

定义应用必须使用到的库，如：jQuery

HTML屬性設定

[ng-style]

指定元素的 style 属性

[ng-class]

指定 HTML 元素使用的 CSS 类

<style>
.style_1{  background-color:red; }
.style_2{  background-color:blue; }
</style>
<select ng-model="setClass">
  <option value="style_1">樣式1</option>
  <option value="style_2">樣式2</option>
</select>
<div ng-class="setClass">顯示樣式</div>

表示當sortReverse==false時顯示class reverse

<span class="sortorder" ng-show="sortType === 'date'" ng-class="{reverse: sortReverse}"></span>

[ng-class-even]

类似 ng-class，但只在偶数行起作用

[ng-class-odd]

类似 ng-class，但只在奇数行起作用

[ng-href]

为 the <a> 元素指定链接

[ng-src]

指定 <img> 元素的 src 属性

[ng-srcset]

指定 <img> 元素的 srcset 属性

[ng-value]

规定 input 元素的值

[ng-options]

在 <select> 列表中指定 <options>

[ng-readonly]

指定元素的 readonly 属性

[ng-open]

指定元素的 open 属性

HTML狀態設定

[ng-if]

如果条件为 false 移除 HTML 元素

[ng-disabled]

规定一个元素是否被禁用

[ng-selected]

指定元素的 selected 属性

[ng-show]

显示或隐藏 HTML 元素

提示信息会在 ng-show 属性返回 true 的情况下显示。

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

[ng-hide]

隐藏或显示 HTML 元素

[ng-non-bindable]

规定元素或子元素不能绑定数据

[ng-switch]

规定显示或隐藏子元素的条件

事件

[ng-click]

定义元素被点击时的行为

[ng-dblclick]

规定双击事件的行为

[ng-change]

规定在内容改变时要执行的表达式

[ng-checked]

规定元素是否被选中

[ng-focus]

规定聚焦事件的行为

[ng-blur]

规定 blur 事件的行为

[ng-cloak]

在应用正要加载时防止其闪烁

[ng-copy]

规定拷贝事件的行为

[ng-cut]

规定剪切事件的行为

[ng-paste]

规定粘贴事件的行为

[ng-submit]

规定 onsubmit 事件发生时执行的表达式

鍵盤事件

[ng-keydown]

规定按下按键事件的行为

[ng-keypress]

规定按下按键事件的行为

[ng-keyup]

规定松开按键事件的行为

滑鼠事件

[ng-mousedown]

规定按下鼠标按键时的行为

[ng-mouseenter]

规定鼠标指针穿过元素时的行为

[ng-mouseleave]

规定鼠标指针离开元素时的行为

[ng-mousemove]

规定鼠标指针在指定的元素中移动时的行为

[ng-mouseover]

规定鼠标指针位于元素上方时的行为

[ng-mouseup]

规定当在元素上松开鼠标按钮时的行为

其他

[ng-repeat]

定义集合中每项数据的模板

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

会重复一个 HTML 元素(有點類似foreach並且輸出值)

Array:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Object:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

[ng-csp]

修改内容的安全策略

[ng-list]

将文本转换为列表 (数组)

[ng-pluralize]

根据本地化规则显示信息

[ng-transclude]

规定填充的目标位置

限制使用

你可以限制你的指令只能通过特定的方式来调用。

restrict 值可以是以下几种:

  • E 只限元素名使用
  • A 只限属性使用
  • C 只限类名使用
  • M 只限注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

自定義指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法（Camel-Case）来命名一个指令， 但在使用它时需要以-分割

假設要增加tag<weiwei-aaa>， 透過app.directive定義weiweiAaa

<div ng-app="myApp">
  <runoob-directive></runoob-directive>
  <weiwei-aaa>weiwei-aaa</weiwei-aaa>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
app.directive("weiweiAaa", function() {
    return {
        template : "<h1>自定义指令!weiweiAaa</h1>"
    };
});
</script>
</div>

你可以通过以下方式来调用指令：

  • 元素名 : <runoob-directive></runoob-directive>
  • 属性 : <div runoob-directive></div>
  • 类名 : <div class="runoob-directive"></div>
  • 注释 : <!-- 指令: runoob-directive -->
    • 指令設為directive
    • <!-- directive: runoob-directive -->
<div ng-app="myApp">
<div> 元素名 : <runoob-tag></runoob-tag></div>
<div> 属性 : <div runoob-tag></div></div>
<div> 类名 : <div class="runoob-class"></div></div>
<div> 注释 : <!-- directive: runoob-directive --></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobTag", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
app.directive("runoobClass", function() {
    return {
        restrict : "C",
        template : "<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 C 才能通过类名来调用指令。</p>"
    };
});
app.directive("runoobDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template :"<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。"
        +"<br>你必须设置 <b>restrict</b> 的值为 M 才能通过注释来调用指令。</p>"
    };
});
</script>
</div>

參考

results matching ""

    No results matching ""