angularJS(一):表达式、指令
2024-08-30 03:38:55
简介
以 JavaScript 编写的库,是一个 JavaScript 框架
一、表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
- 表达式写在双大括号内:{{ expression }}。
- 表达式把数据绑定到 HTML,与 ng-bind 指令有异曲同工之妙。
- 将在表达式书写的位置"输出"数据。
- 它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }
二、指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app | 初始化一个 AngularJS 应用程序(告诉 AngularJS,ng-app所在元素是 AngularJS 应用程序 的"所有者"。)
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> |
ng-init | 定义初始值 |
ng-model |
把元素值(比如输入域的值)绑定到应用程序。用于表单元素的,支持双向绑定(在修改输入域的值时, AngularJS 属性的值也将修改:)。对普通元素无效({数据绑定:{ firstName }} 是通过 ng-model="firstName" 进行同步。) 模型 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值 <div ng-app="myApp" ng-controller="myCtrl"> <form ng-app="" name="myForm"> 验证用户输入 <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> 应用状态
|
ng-repeat | 对于集合中(数组中)的每个项会 克隆一次 HTML 元素
<div data-ng-app="" data-ng-init="names=['Jani1','Hege','Kai']"> |
创建自定义指令:
- 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
- 元素<runoob-directive></runoob-directive>
- 只能通过属性的方式来调用,restrict : "E",
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
- 属性<div runoob-directive></div>
- 只能通过属性的方式来调用,restrict : "A",
<body ng-app="myApp"> <div runoob-directive></div> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
- 类名<div class="runoob-directive"></div>
- 只能通过属性的方式来调用,restrict : "C",
<body ng-app="myApp"> <div class="runoob-directive"></div> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
- 注释<!-- directive: runoob-directive -->
- 只能通过属性的方式来调用,restrict : "M",
<body ng-app="myApp"> <!-- directive: runoob-directive --> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
restrict 默认值为 EA
, 即可以通过元素名和属性名来调用指令。
最新文章
- c#使用WebClient登录网站抓取登录后的网页
- VS 创建虚拟目录失败,映射到其他文件夹!
- java面试---summay
- 典型的字符串处理代码(page50)
- [转]freemarker中的list
- HashMap加入数据后,会自动根据首字母排序
- HDU4521+线段树+dp
- C#泛型的性能优势
- 自定义滚动条 niceScroll 配置参数
- 使用 CodeIgniter 框架快速开发 PHP 应用(三)
- 洛谷-神奇的幻方-NOIP2015提高组复赛
- superslide2插件
- PAT 1008. Elevator (20)
- 单例模式、简单工厂模式、XML解析
- JDBC(Java Data Base Connectivity,java数据库连接)
- Spring.Net实现跨数据库服务层事务管理
- Lucene最重要的功能是对一段话的分析
- redis序列化异常------------org.springframework.data.redis.serializer.SerializationException
- 模拟日历计算 poj1008
- jquery的$.each如何退出循环和退出本次循环