分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

angularjs常用指令

发布时间:2023-09-06 01:24责任编辑:白小东关键词:js指令

1、ng-app=" " 定义angularJS的使用范围;

2、ng-init="变量=值;变量=‘值‘" 初始化变量的值,有多个变量时,中间用分号隔开;

3、ng-model="变量" 定义变量名;

4、ng-bind="变量" 绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值,比如:{{变量}}。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。
例如:
<div ng-app="">
????<p>名字 : <input type="text" ng-model="name"></p>
????<h1>Hello {{name}}</h1>
</div>

ng-repeat 指令会重复一个 HTML 元素;

创建自定义的指令:
<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>

restrict 值可以是以下几种:

???E 作为元素名使用
???A 作为属性使用
???C 作为类名使用
???M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令

提示信息会在 ng-show 属性
<form ng-app="" name="myForm">
???Email:
???<input type="email" name="myAddress" ng-model="text">
???<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
以上实例中,提示信息会在 ng-show 属性返回 true 的情况下显示。

angularjs常用指令

原文地址:http://www.cnblogs.com/kellyPan/p/7821858.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved