AngularJS 常用指令

Stella981
• 阅读 566

AngularJS 指令

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”,是用来扩展浏览器能力的技术之一,在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行,这使得指令可以为DOM指定行为,或者改变它。

AngularJS指令带有前缀ng-,我们也可以称之为“指令属性”,它就是绑定在DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

当浏览器启动、开始解析HTML时,DOM元素上的指令属性就会跟其他属性一样被解析,也就是说当一个Angular.js应用启动,Angular编译器就会遍历DOM树来解析HTML,寻找这些指令属性函数,在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。

ng-app

ng-app定义一个AngularJS应用程序,它是应用程序的起点,会自动初始化AngularJS框架。AngularJS在加载整个文档后找到文档中拥有ng-app指令的元素,编译该元素及其子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <script>
        var app = angular.module('myApp', []);
    </script>
</body>
</html>
  • 该元素的父元素或兄弟元素不会被编译。

  • 在当个HTML中只允许存在一个ng-app指令

  • 我们也可以不定义ng-app 指令,手动初始化AngularJS

    // 指定document元素,调用angular.bootstrap 函数,手动初始化AngularJS angular.element(document).ready(function () { angular.bootstrap(document); });

ng-init

ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="msg='hello world!';name='chenjy';age='16'">
    <div>
        name:<span>{{name}}</span>,
        age:<span>{{age}}</span>
    </div>
</body>
</html>

ng-model

ng-model指令用于AngularJS中的双向数据绑定。它将<input><select><textarea>元素绑定到$ scope对象上的指定属性。因此,元素的值将是属性的值,反之亦然。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app>
    your name:<input type="text" ng-model="name"/>,
    your name:{{name}}
</body>
</html>

ng-bind

ng-bind将应用程序数据绑定到元素上。如果数据的值发生改变,会更新元素。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app>
    your name:<input type="text" ng-model="name">,
    your name:<span ng-bind="name"></span>
</body>
</html>

ng-bind和表达式{{}}很像,但是ng-bind是在angularJS解析渲染完毕后才将数据显示出来的。 对于首个页面中的数据绑定操作,建议采用ng-bind,以避免其未被渲染的模板被用户看到。

ng-repeat

ng-repeat对指定数组集合中的每一项都重复一次HTML。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="namesList=['chenjy','tom','jerry']">
    <ul>
        <li ng-repeat="name in namesList">
                {{name}}
            </li>
    </ul>    
</body>
</html>

如果我们把namesList=['chenjy','tom','jerry']改成namesList=['chenjy','chenjy','jerry']

你会发现报错了!

Error: ngRepeat:dupes Duplicate Key in Repeater

dupes

  • ng-repeat 不允许collection中存在两个相同Id的对象,对于数字或者字符串等基本数据类型它的id就是本身的值。因此,数组是不允许存在两个相同的数字。需要自己定义track by 表达式。

  • {{name}}

ng-click

AngularJS提供的点击事件指令,对于按钮、链接等可以通过ng-click实现点击事件绑定。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="age=16">
    age:<span ng-bind ="age"></span>
        <button ng-click="age=age+1">Change age</button>
</body>
</html>

ng-show和ng-if

ng-show和ng-if都可以用一个表达式来控制是否显示元素。

不同的是 ng-show 当表达式为false的时候只是给对应的元素添加了一个ng-hide的class隐藏元素。

ng-if如果值为false则会在渲染的过程中不加载元素。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="isTom=false;isJerry=false">
    <span ng-if ="isTom">Tom</span>
    <button ng-click="isTom=!isTom">Change</button>
    <br />
    <span ng-show ="isJerry">Jerry</span>
    <button ng-click="isJerry=!isJerry">Change</button>
</body>
</html>
  • ng-if 包含的元素都拥有自己的作用域。相对于控制器作用域来说,这个作用域属于一个子级作用域。如果想用ng-model绑定控制器的变量值,必须添加$parent标识

    <button ng-click="changeTom()">Change</button>
    age,<span ng-bind="tomAge"></span>
    
    <script>
    
    angular.module('myApp',[])
      .controller("myCtrl",function($scope){
          
          $scope.isTom = false;
          $scope.tomAge = 16;
          
          $scope.changeTom = function(){
              $scope.isTom = !$scope.isTom;
              $scope.tomAge++;
          }
      });
    

ng-readonly

从指定表达式返回的布尔值使HTML元素成为只读。如果表达式返回true,则该元素将变为只读,否则将变为只读。

ng-disabled

从指定表达式返回的布尔值禁用HTML元素。如果表达式返回true,则将禁用该元素,否则不会。适用于input, select,button 或 textarea标签。

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <button ng-disabled="isTom">call Tom!</button>
    <button ng-click="changeTom()">Change</button>
    <script>
    
    angular.module('myApp',[])
      .controller("myCtrl",function($scope){
          $scope.isTom = false;
          $scope.changeTom = function(){
              $scope.isTom = !$scope.isTom;
          }
      });
</script>
</body>
</html>
  • 如果想在div、span起作用,可以通过pointer-events来实现。

    call Tom!

ng-class和ng-style

ng-classng-style都是通过表达式来控诉是否加载Class或css样式

ng-class:表达式返回值可以是字符串,对象,或一个数组

ng-style:表达式返回值都必须是对象

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<style>
    
    .yellow{
        background-color: yellow;
    }
    
    .red{
        background-color: red;
    }
    
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <button ng-click="changeColor()" ng-class="{'yellow':isYellow,'red':!isYellow}">ChangeMyself</button>
    <button ng-click="changeColor()" ng-style="isYellow?yellow:red">ChangeMyself</button>
    <script>
    angular.module('myApp',[])
      .controller("myCtrl",function($scope){
        $scope.isYellow = false;
        $scope.changeColor = function(){
            $scope.isYellow = !$scope.isYellow;
        }
        
        $scope.yellow = {
            "background-color":"yellow"
        }
        
        $scope.red = {
            "background-color":"red"
        }
      });
</script>
</body>
</html>
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
AngularJS 指令实践
指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。在这篇文章的最后,我会指导你如何使用Angular指令来创建一个简单的记事本应用。概述一个指令用来引入新的HTML语法。指令是DO
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这