AngularJS 学习笔记 02：指令（directive）

最新推荐文章于 2019-07-04 13:38:17 发布

原创最新推荐文章于 2019-07-04 13:38:17 发布 · 252 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Frame for data 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了AngularJS中的各种内置指令及自定义指令的使用方法，包括ng-app、ng-controller等核心指令的应用场景，并深入探讨了如何通过directive定义自定义指令。

自定义指令
内置指令

自定义指令

使用 directive 定义
依官方规范，指令名（directiveName）的定义遵循驼峰式命名，使用时用 - 连接单词
restrict 参数
E（element）元素：<directiveName> </directiveName>
A（attribute）属性：<div directiveName> </div>
C（className）类：<div class = 'directiveName'> </div>
M（comMent）注释：

var app = angular.module('App', [])

app.directive('directiveName', function(){
    return {
        restrict: 'EACM',
        replace: true, // 是否采用HTML模板替换原有的元素，推荐改为 true 或 1
        template: '<span> String </span>', // HTML模板
        templateUrl: './base.html', // HTML模板路径
        priority: 0 // 指令执行的优先级，默认值为 0
    }
})

<!-- 使用 -->
<directiveName></directiveName>

内置指令

angular是一个对象，里面提供了方法

ng-app（指定根元素）

创建一个模块
参数1：模块名称
参数2：依赖于那些模块

var app = angular.module('App', []);

ng-controller（定义控制器）

创建控制器
参数1：控制其名称
参数2：数组，用来表示数据，依赖的注入

app.controller('controllerName', ['$scope', function($scope){

}])

ng-include（引入页面文件）

引入文件

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

ng-cloak（闪烁修复）

解决 {{name}} 刷新闪烁的问题

<div ng-cloak>{{name}}</div>

ng-repeat（遍历输出）

遍历输出
重复数据报错解决 track by $index

<ul>
    <li ng-repeat="(key,value) in arrObj track by $index">
        {{key}} : {{value}}
    </li>
</ul>

ng-model / ng-init（定义 / 初始化变量）

ng-model 绑定了 HTML 表单元素到 scope 变量中，若 scope 中不存在变量, 将会创建它
ng-init 初始化化变量

<element ng-model="name" ng-init="name='hannah'"></element>

app.controller('demoModel', [$scope, function(){
    $scope.name = 'hannah'; // 推荐在控制器里定义变量
}])

ng-if（元素是否存在）

ng-if 在表达式为 false 时移除 HTML 元素
ng-show 显示或隐藏元素，为 true 或 1时显示，反之隐藏
ng-hide 显示或隐藏元素，为 true 或 1时隐藏，反之显示

<!-- 当复选框被选中时，显示div元素，未选中则隐藏div demo元素 -->
<input type="checkbox" ng-model="demo">

<div ng-if="demo">hello word</div>

ng-bind（绑定元素内容）

ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容
ng-bind-html 绑定所在 HTML 元素的内容到指定变量
ng-bind-template 绑定多个变量或表达式

<div ng-app="App" ng-controller="Ctrl">

    <!-- 将元素内容替换为变量 name 的值 -->
    <div ng-bind="name"></div>

    <!-- 将所在元素的内容（innerHTML）绑定到变量 name -->
    <div ng-bind-html="name"> hannah </div>

    <!-- 相比 ng-init 可以使用多个变量 -->
    <div ng-bind-template="{{name}} {{age}}"></div>

</div>

ng-class（绑定CSS类）

ng-class 给 HTML 元素动态绑定一个或多个 CSS 类，值为 true 或 1 则应用样式
ng-class-odd 只作用于奇数行，与 ng-repeat 指令搭配使用
ng-class-even 只作用于偶数行，推荐用于表格

<div ng-class="'green'"></div>
<div ng-class="{green:1, red:0}"></div>

<table ng-controller="myCtrl">
    <tr ng-repeat="val in user" ng-class-odd="'red'" ng-class-even="'green'">
        <td>{{val.name}}</td>
        <td>{{val.age}}</td>
    </tr>
</table>

ng-disabled（禁用）

ng-disabled 禁用输入
ng-readonly 禁用改动

<input type="text" ng-disabled="1">

<input type="text" ng-readonly="1">

ng-swith

指令根据表达式，匹配项显示，不匹配项移除
对应的子元素使用 ng-switch-when 指令
使用 ng-switch-default 指令设置默认选项，若无匹配，显示默认项。

<select ng-model="option">
  <option value="1">A
  <option value="2">B
  <option value="3">C
</select>

<div ng-switch="option">
  <div ng-switch-when="1">内容A</div>
  <div ng-switch-when="2">内容B</div>
  <div ng-switch-when="3">内容C</div>
  <div ng-switch-default>默认内容</div>
</div>

ng-src（资源文件引入）

-ng-src 指令覆盖了原 src 属性，确保的 AngularJS 代码执行前不显示，避免二次引入
-ng-href 同上

<link rel="stylesheet" ng-href = "master.css">
<script ng-src="mian.js"></script>
<img ng-src="images/user.jpg">