AngularJS入门（3）---指令

最新推荐文章于 2023-03-15 15:16:45 发布
最新推荐文章于 2023-03-15 15:16:45 发布
阅读量116 收藏
点赞数 1
分类专栏： 指令 文章标签： AngularJS入门（3）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43735372/article/details/84258790
版权

AngularJS指令

  1. AngularJS指令的作用：用来扩展HTML，添加功能，而且可以自定义指令
  2. AngularJS指令定义规则：ng作为前缀，HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是可以使用 data-ng- 来让网页对 HTML5 有效，如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-ng-init="firstName='张'">

<p>我姓 <span data-ng-bind="firstName"></span></p>

</div>
</body>
</html>
  1. 常见指令
    3.1 ng-app、ng-init、ng-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app ng-init="name='张敏'">
        <p>姓名：<input type="text" ng-model="name"></p>
        <p>你的名字是:{{name}}</p>
</div>>

</body>
</html>
  • ng-app 指令初始化一个 AngularJS 应用程序,给ng-app一个名字，后续就可以直接通过这个名字来调用这个代码块；
  • ng-init 指令用来初始化数据值，注意“=”和“：”的使用要分清。通常情况下，不使用 ng-init。一般使用一个控制器或模块来代替它；
  • ng-model 指令把元素值（比如input中输入的值）绑定到应用程序。 用于数据绑定表达式；
  • ng-model 指令也可以：为应用程序数据提供类型验证（number、email、required）、为应用程序数据提供状态（invalid、dirty、touched、error）、为 HTML 元素提供 CSS 类、绑定 HTML 元素到 HTML 表单(下篇会详细介绍这个指令)；
  • AngularJS 中的数据绑定，同步了 AngularJS 表达式AngularJS 数据库，如下实例，两个文本域是通过两个 ng-model 指令同步的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

 <div ng-app ng-init="length=5;width=10">
        <p>长：<input type="text" ng-model="length"></p>
        <p>宽：<input type="text" ng-model="width"></p>
        <p>面积：{{length*width}}</p>
 </div>

</body>
</html>

3.2 ng-repeat

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

 <div ng-app ng-init="names=['张森玮','谭淇蔚','梁欢欢']">
        我的舍友是：<li ng-repeat="x in names">
            {{x}}
        </li>
 </div>

</body>
</html>

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素，可以用来做遍历，循环数组，也可以用来循环对象数组，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

 <div ng-app ng-init="person=
 [{name:'张森玮',sex:'男'},{name:'谭淇蔚',sex:'男'},{name:'梁欢欢',sex:'女'}]">
        我的舍友是：
        <li ng-repeat="x in person">
            {{x.name+","+x.sex}}
        </li>
 </div>

</body>
</html>

3.3创建自定义的指令
除了 AngularJS 内置的指令外，还可以创建自定义指令。可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， newDirective, 但在使用它时需要以 - 分割, new-directive。
可以通过以下方式来调用指令：
3.3.1元素名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
    <new-directive></new-directive>
    <script>
        var app = angular.module("myApp", []);
        app.directive("newDirective", function () {
            return {
                template: "<h1>这是我自定义指令</h1>"
            }
        });
    </script>
</body>
</html>

3.3.2属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
    <div new-directive></div>
    <script>
        var app = angular.module("myApp", []);
        app.directive("newDirective", function () {
            return {
                template: "<h1>这是我自定义指令</h1>"
            }
        });
    </script>
</body>
</html>

3.3.3类名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
    <div class="new-directive"></div>
    <script>
        var app = angular.module("myApp", []);
        app.directive("newDirective", function () {
            return {
                restrict: "C",
                template: "<h1>自定义指令</h1>"
            }
        });
    </script>
</body>
</html>

注意： 你必须设置 restrict 的值为 “C” 才能通过类名来调用指令。

3.3.4注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
    <div class="new-directive"></div>
  <!-- directive: new-directive -->
    <script>
        var app = angular.module("myApp", []);
        app.directive("newDirective", function () {
            return {
                restrict: "M",
                replace: true,
                template: "<h1>自定义指令</h1>"
            }
        });
    </script>
</body>
</html>

注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。

注意： 你必须设置 restrict 的值为 “M” 才能通过注释来调用指令。

3.3.5限制使用

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>
</html>

注意： 通过设置 restrict 属性值为 “A” 来设置指令只能通过 HTML 元素的属性来调用。
restrict 值可以是以下几种:

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

更多的指令可以参考这个

weixin_43735372
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS 入门3-选择框和表格
武林半侠的博客
06-18 652
AngularJS 入门3-选择框和表格   1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项。 使用 ng-options 创建选择框 使用 ng-options 创建选择框                            ng-model="selectedName">
AngularJS 入门4-表单和验证
武林半侠的博客
06-18 378
AngularJS 入门4-表单和验证   1.AngularJS 表单 ①文本输入框 ②复选框 checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定 ③单选框 单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。 选择一个选项: Dogs Tutorials
AngularJS 入门6-路由
武林半侠的博客
06-18 745
AngularJS 入门6-路由   AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 这个NG的路由模块可以实现带有多视图的单页面开发 实例： //HTML部分 AngularJS 路由应用 首页 电脑 打印机 其他 解析： 1当点击链接href="#
AngularJS 入门1-基础
武林半侠的博客
06-18 440
AngularJS 入门1-基础    1.简介及使用方法 AngularJS 可以干什么？ 答：AngularJS 能够非常容易的将input，select，button，textarea的内容提取并应用到HTML中，即解决静态网页技术在构建动态应用上的不足。AngularJS是为了克服HTML在构建应用上的不足而设计的。 没有AngularJS 时，我们使用以下技术来实现H
AngularJS杂记3----创建指令
aigoV的博客
05-31 387
AngularJS 指令 一、概念： AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序，告诉 AngularJS， 元素是 AngularJS 应用程序 的"所有者"。 ng-init 指令初始化应用程序数据。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。 ng
AngularJs 入门系列-2 表单验证
ziqi688的博客
08-15 33
对于日常的开发来说，最常见的开发场景就是通过表单编辑数据，这里涉及的问题就是验证问题。 angularjs 内置已经支持了常见的验证方式，可以轻松实现表单验证。 1. 绑定 为了方便，我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容。 $scope.model = { id : 8, name: "alice", email: "alice...
视频教程-AngularJS极速入门-JavaScript
weixin_30074829的博客
05-28 109
AngularJS极速入门 江湖花名"King"全栈工程师，开发工程师。曾就...
AngularJS ng-if使用
我的博客
03-15 536
ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。如果if语句执行结果为true，会添加元素，并显示。ng-if指令用于在表达式为false时。
AngularJS快速入门4--内置指令
qq_38531689的博客
04-27 378
AngularJS的指令：扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能，Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等。 控制指令：1.ng-app,用于指定AngularJS应用启动的入口和挂载应用的根模块，它自动引导Angular程序的运行，在定义应用程序运行入口的同时，可以绑定一个DOM元素， DOM元素的开始标签和结束标签之间~就可以认为是
AngularJS入门教程-v1.01-20130527.pdf
01-19
AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为...AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。
AngularJS入门（用ng-repeat指令实现循环输出
10-22
主要介绍了AngularJS入门（用ng-repeat指令实现循环输出,需要的朋友可以参考下
AngularJS入门教程之ng-checked 指令详解
10-21
本文主要讲解AngularJS ng-checked 指令,在这整理ng-checked 指令的基础知识,并附代码实例,有需要的小伙伴可以参考下
AngularJS入门教程之ng-class 指令用法
11-22
AngularJS ng-class 指令 AngularJS 实例 修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> [removed][removed] <style> .sky { color:white; ...
angularjs-common-code-sharing
05-14
AngularJS通用代码共享，基于AngularJS应用的种子我需要在Web版本和phonegap版本之间共享通用代码（指令，服务）的创建该项目的方案。 该项目还支持最小化，部署到phonegap工作区的艰巨任务，因此您可以快速构建移动...
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
最新发布
07-08
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
2003-2023年飞机航线信息数据.xlsx
07-08
2003-2023年飞机航线信息数据 1、时间：2003-2023年 2、来源：高铁航线数据库（Chinese High-speed Rail and Airline Database，CRAD） 3、指标：起点城市、起点城市所属地级市、起点城市所属省份、起点机场、终点城市、终点城市所属地级市、终点城市所属省份、终点机场、航空公司、更新日期、航班、出发时间、到达时间、准点率、班次_周一、班次_周二、班次_周三、班次_周四、班次_周五、班次_周六、班次_周日
Xilinx Vitis 2020工程源目录修改
07-08
Xilinx Vitis可以做standalone程序开发,不过其工程中使用的路径为绝对路径。工程更换位置后编译将会显示错误。例如：源目录为D:/work,复制到同事电脑上放到C:/work(同事电脑只有一个C盘)。利用Vitis打开工程编译会有一堆错误，提示文件找不到。本脚本用来解决该问题。
1000__gpt_4_prompts.md
07-08
1000__gpt_4_prompts
angularjs 1.6.9 ng-bind指令
05-26
在 AngularJS 1.6.9 中，ng-bind 指令用于绑定 HTML 元素的 innerText 或 value 属性到表达式的值。 例如，可以使用以下代码将一个变量绑定到一个 HTML 元素的 innerText 属性： ``` <div ng-bind="myVariable"> `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值