2.angular指令

shadouqi2025-03-16 17:54

初级使用可以查看视频
参考手册
注意

  • 像ng-class,ng-value,ng-href等这些，很多都可以直接用class="{{}}" 原生写，为啥还出这些指令，是因为原生的比如刚一进页面就先出现表达式了，浏览器走到这里的时候才去解析，给用户的体验不好

ng-app

  • angular只对这个标签以内的起作用，要不就直接原生解析
  • 告诉angular核心它管理当前标签所包含的整个区域,有自动创建$rootScope(根作用域对象),如果是可以ng-app = "*" 就是模块名 ,就是那个.module('')

ng-controller="*",

  • 新创建一个新的作用域,然后自动new构造函数就是.controller里面名字,(name, [ s c o p e , f u n c t i o n ( scope, function( scope,function(scope) {}]),
  • 用数组的原因,是这个$scope不可以变名字,但是压缩后的代码一般都会形参变成a,b,c,d这种,所以用数组这种传,
  • 可以使用as用来面向对象,其实就是相当于new的实例可以使用原型链上的方法或属性，面向对象

ng-repeat:

遍历,里面可以用index, first(第一项), middle(除了第一和最后), last(最后一项), odd, even / ng-repeat-start ng-repeat-end 可以用来嵌套
先来个完整的：后面只是使用的例子

ng-init 初始化数据 ng-init="username='zjap'", 一般也不会用,但是比如嵌套循环的时候可能会用到

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active1 {
            background: red
        }
        .active2 {
            background: green
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <ul>
        <!-- 隔行换色 -->
        <li ng-repeat="data in dataList" class="{{$odd? 'active1': 'active2'}}">{{data}}{{$odd}}</li>
    </ul>

    <table border="1">
      <!-- 这种相当于嵌套的<template v-for似的，ng-show让其隐藏要不可能影响合并> -->
        <tr ng-show="false" ng-repeat-start="data in twoTableLitst track by $index" ng-init="outIndex=$index"></tr>
          <tr ng-repeat="chil in data.children track by $index" ng-init="inIndex=$index">
            <td ng-if="inIndex == 0" rowspan="{{data.children.length}}">{{ data.name }}</td>
            <td>{{ chil }}</td>
          </tr>
        <tr ng-show="false" ng-repeat-end></tr>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.dataList = ['aaa', 'bbb', 'ccc', 'ddd']
            $scope.twoTableLitst = [
                {name: 'aaa', children: ['11', '22']},
                {name: 'bbb', children: ['11', '22']},
            ]
        }])
    </script>
</body>
</html>
javascript 复制代码 
<body ng-app="myApp" ng-controller="Aaa as a1">
    <span>{{a1.text}}</span>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', FnAaa])
        function FnAaa($scope) {
        }
        FnAaa.prototype.text="woshi"
    </script>
</body>

ng-class:动态class

ng-style: 动态style

ng-href href

ng-src

ng-attr-**这个基本其他所有的属性都可以使用，因为不可能原生的都有对应的ng-属性，所以咱们就是所有属性都可以用这个eg：title

ng-disabled --$interval 不可点击

ng-readonly 只读

ng-checked 複選框选中

ng-value 输入框等的值

也可以用value="{{}}",但是这个体验不好,用户可能先在页面看到{{}},后期才能看到内容,所以推荐ng-value

javascript 复制代码 
<body ng-app="myApp" ng-controller="Aaa">
    <span ng-class="{active: IsDisabled}" ng-style="{color: 'yellow'}">{{ text }}</span>
    <span ng-style="ngStyle">{{ text }}</span>
    <span ng-class="ngClass">{{ text }}</span>
    <a ng-href="{{ngHerf}}" ng-attr-title="{{ text }}">qubaidu</a>
    <input type="button" ng-value="text" ng-disabled="IsDisabled">
    <input type="text" ng-value="text" ng-readonly="IsDisabled">
    <input type="checkbox" ng-checked="IsDisabled">
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$interval', function($scope, $interval) {
            // setInterval --$scope.apply()
            let iNow = 5
            $scope.text = iNow + '秒'
            $scope.IsDisabled = true
            $scope.ngStyle={
                background: 'yellow',
                color: 'red'
            }
            $scope.ngClass = {
                active: true
            }
            $scope.ngHerf = "http://www.baidu.com"
            const timer = $interval(function() {
                iNow--
                $scope.text = iNow + '秒'
                if (iNow === 0) {
                    $interval.cancel(timer)
                    $scope.IsDisabled = false
                }
            }, 1000)
        }])
    </script>
</body>

ng-bind

解决{{}}闪屏问题,因为{{}} 当时浏览器不知道,到下面看到angular,再上去解析这种就会闪屏,跟ng-value似的

ng-cloak

这个就是比如用户就想用{{}}不想用ng-bind,但是想让{{}}解析出来才展示,平常时候就是display:none

ng-bind-template

这个就是比如标签中内容多个{{}},肯定用ng-bind不合适,所以就使用这个

ng-bind-html

这个就是解析成html,但是因为这个功能不常用,所以angular就设置成一个插件形式,后期需要按照模块引入就行,从这里查:https://www.bootcdn.cn/angular.js/,下面代码其实是有问题的,可能是引入的库不对,后面研究,但是写法基本是这种

ng-non-bindable // 就比如说想让{{}}展示出来，不去解析

javascript 复制代码 
<body ng-app="myApp" ng-controller="Aaa">
    <span ng-bind="text"></span>
    <span ng-cloak>{{ text }}</span>
    <span ng-bind-template="{{ text }}, {{text}}"></span>
    <div ng-bind-html="htmlstr"></div>
    <span ng-non-bindable>{{ text }}</span>
    <script src="./public/angular.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
    <script>
        // alert('1')
        var m1 = angular.module('myApp', ['ngSanitize'])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.text = 'nihao'
            $scope.htmlstr = '<h1>1111</h1>'
        }])
    </script>
</body>

ng-show,ng-hide 显示隐藏，就是css的disable的切换

ng-if dom元素显示

ng-switch

ng-open 应用于details,默认是展开还是隐藏

javascript 复制代码 
<body ng-app="myApp" ng-controller="Aaa">
    <input type="button" value="点击" ng-click="checkButton()">
    <span v-if="isShow">展示</span>
    <div ng-switch on="lalal">
        <p ng-switch-when="1">我是1</p>
        <p ng-switch-when="2">我是2</p>
        <p ng-switch-default>我是其他</p>
    </div>

    <details ng-open="isShow">
        <summary>我是总体</summary>
        <p>我是介绍</p>
    </details>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.isShow = true
            $scope.lalal = 1
            $scope.checkButton = function() {
                $scope.isShow = !$scope.isShow
                $scope.lalal++
            }
        }])
    </script>
</body>

ng-model: 跟v-model似的,双向数据绑定,但是如果比如想不时实的去更改可以使用ng-model-options和updateOn去配置

ng-include 可以引入新的html,这个在这个上面写也是报错,目前不知道到为啥

---我知道为啥了，需要放到服务器上，不是本地浏览器打开

javascript 复制代码 
<body ng-app="myApp" ng-controller="Aaa">
    <!-- 但是不起作用，不知道为啥 -->
    <div ng-include="'moni.html'"></div>
    <!-- 不时实,失去焦点才变 -->
    <input type="text" ng-model="text" ng-model-options="{updateOn: 'blur'}">
    <span>{{text}}</span>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.text = "我是开始"
        }])
    </script>
</body>
</html>

事件

ng-mouseenter,ng-mouseleave 移入移出

ng-click/dbclick 点击

ng-selected //下拉菜单选中

ng-change // input change事件

ng-copy ng-cut ng-paste 输入框复制,j剪切,粘贴操作

其他原生事件都可以用ng-事件名

标签指令

<a> 普通的a标签会点击刷新页面有默认行为，angluar重新封装了下，没有默认行为了

select

复制代码 
-- ng-options

form

复制代码 
-- novalidate
javascript 复制代码 
<body>
    <div ng-app="myApp" ng-controller="Aaa">
        <!-- 默认行为点击 -->
        <a href="">{{myColor}}</a>
        <!-- myColor是color对象,color.name是展示的 -->
        <select ng-options="color.name for color in colors" ng-model="myColor"></select>
        <!-- 如果不写novalidate会有默认表单样式,比如说输入不是email,就会有红色边框,这没模拟出来 -->
        <form novalidate>
            <input type="email">
        </form>
    </div>
    <a href="">aaaaaaaaaaaa</a>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.colors = [{name: 'red'}, {name: 'yellow'}]
            $scope.myColor = ''
        }])
    </script>
</body>

表单指令

这些结合表单验证更容易理解，看3文档

自定义指令

我理解的自定义指令就是你可以把功能或者组件单独写出来 ，以供后期复用 ，相当于vue的component组件

介绍

  • restrict

    • E ： 标签形式 eg: <hello>
    • A : 属性形式 eg： <div hello />
    • C: class形式 eg <div class="hello" />
    • M: 注释写法 eg： <-- directive:hello -->注释需要replace: true 可以组合使用
      一般会使用前两个也就是'E'和'A',一般A是功能性的使用较多，E一般是模板替代形式跟vue中组件似的

  • replace

    • true : 里面内容直接替换外面标签，要不总在写的里面

  • template

  • templateUrl

  • scope

    • true 独立作用域，如果不写这个scope的话就会所有组件公用一套数据，在一个上面改，其他的都会变
    • {} 隔离作用域，不再跟外层作用于有任何瓜葛，独立作用域还会集成上面的Aaa里面数据，这个隔离就不会继承了，只能使用什么就传过来
      • @ 就是解析字符串
      • = 找变量
      • & 函數

  • link ---（scope, element, attr,reController） (reController就是拿别的组件里面的属性值，下面讲),主要用于操作dom的,跟controller的区别自己感觉是controller是可以吧公共逻辑都放在里面,当如果集成另一个指令,想拿另一个指令的定义的变量就可以用link的reController么

  • controller --就写逻辑的地方

代码中使用

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp">
    <div class="nihao" ng-controller="Aaa">
        <my-hello my-id="div1" my-name="name" my-fn="show(num)"></my-hello>
        <my-hello my-id="div2" my-name="name" my-fn="show(num)"></my-hello>
    </div>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.name = 'zhaohui'
            $scope.show = function(num) {
                alert(num)
            }
            
        }])
        m1.directive('myHello', function() {
            return {
                restrict: 'AE',
                replace: true, // 替换标签
                template: '<div id="{{myId}}" ng-click="myFn({num: 123})">{{name}}</div>',
                // templateUrl: './moni.html' // 这个跨域不知道咋弄
                // scope: true, // 独立作用域 就比如第二个<my-hello 写ng-init="name=lala" ,则第一个就是zhaohui, 第二个就是lala
                // scope: {}, // 隔离作用域,其实上面那种就不去找Aaa controller的变量name,就找自己controller的内容
                scope: {
                    myId: '@', // 就是解析字符串,就比如説是div1,div2
                    myName: '=', // 找变量,视频说是找Aaa controller的变量name,但是我渲染的是zhaohui1234221,后面具体看吧
                    myFn: '&' // 函數,这个找的就是Aaa controller的方法
                },
                controller: ['$scope', function($scope) {
                    // 共享数据
                    $scope.name = 'zhaohui1234221'
                }],
                link: function(scope, element, attr) {
                    console.log(scope, element, attr) // 自己作用域(比如自己的controller.name), 元素(里面div), 属性
                    element.css('color', 'red')
                }
            }
        })
    </script>
</body>
</html>
相关推荐
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端
爱敲代码的小鱼9 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示