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

╰+哭是因爲堅強的太久メ 2022-05-26 05:10 227阅读 0赞

*  自定义指令
 *  内置指令
    
     *  ng-app（指定根元素）
     *  ng-controller（定义控制器）
     *  ng-include（引入页面文件）
     *  ng-cloak（闪烁修复）
     *  ng-repeat（遍历输出）
     *  ng-model / ng-init（定义 / 初始化变量）
     *  ng-if（元素是否存在）
     *  ng-bind（绑定元素内容）
     *  ng-class（绑定CSS类）
     *  ng-disabled（禁用）
     *  ng-swith
     *  ng-src（资源文件引入）

# 自定义指令 #

*  使用 `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（引入页面文件） ##

*  引入文件

## ng-cloak（闪烁修复） ##

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

## 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` 初始化化变量

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

## ng-if（元素是否存在） ##

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

<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">
    
        
        <div ng-bind="name"></div>
    
        
        <div ng-bind-html="name"> hannah </div>
    
        
        <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` 只作用于偶数行，推荐用于表格

## ng-disabled（禁用） ##

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

## ng-swith ##

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

## ng-src（资源文件引入） ##

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