一、langularJs的指令系统

<!DOCTYPE HTML>

<html ng-app><!--这种以ng开头的就是指令系统，初始化的一个指令，不仅可以加在html这个标签上加在HTML这个标签中是全局，还可以加在下面任何标签中，加了这个指令的标签就能被解析（局部的）-->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

function Aaa($scope,$timeout){

    $scope.name = 'hello';

}

</script>

</head>

<body>

<div ng-controller="Aaa"><!--这种以ng开头的就是指令系统，controller是一个链接数据和界面的控制器-->

    <p>{{name}}</p>

</div>

</body>

</html>

二、langularJs的双向数据绑定

　　就是通过数据影响视图，视图影响数据的一个过程

<!DOCTYPE HTML>

<html ng-app>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

function Aaa($scope,$timeout){

    $scope.name = 'hello';

    //设置一个定时器，两秒后改变name的值

    /*setTimeout(function(){

        $scope.name = 'hi';

    },2000);

    这种方式没有效果

    */

    $timeout(function(){

        $scope.name = 'hi';

    },2000);//这种方式有效果，两秒后改变了name的值

}

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{name}}</p>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

function Aaa($scope,$timeout){

    $scope.name = 'hello';

    $scope.show = function(){

        $scope.name = 'hi';

    };

}

</script>

</head>

<body>

<div ng-controller="Aaa" ng-click="show()">

    <p>{{name}}</p>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    function Aaa($scope,$timeout){

        $scope.name = 'hello';

    }

</script>

</head>

<body>

<div ng-controller="Aaa">

    <input type="text" ng-model="name"><!--通过这个输入框改变了name的值-->

    <p>{{name}}</p>

</div>

</body>

</html>

angularJs的指令系统和双向数据绑定的更多相关文章

  1. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  2. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  3. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  4. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  5. Vue、AngularJS 双向数据绑定解剖

    数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...

  6. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. AngularJS之双向数据绑定,class绑定

    之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...

  8. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

  9. 玩转angularJs——通过自定义ng-model，不仅仅只是input可以实现双向数据绑定

    体验更优排版请移步原文:http://blog.kwin.wang/programming/angularJs-user-defined-ngmodel.html angularJs双向绑定特性在开发 ...

随机推荐

  1. JAVA练手--文件操作

    1. File类 主要作用:用于文件和文件夹的创建.查找.删除等操作 public static void main(String[] args) throws IOException { File ...

  2. [译]用R语言做挖掘数据《五》

    介绍 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: 1. ...

  3. 关于service相关知识的认识

    做android的程序开发也有了许久了,当做一个大程序的时候,越来越发现service是非常有用的方法,当你想后台运行数据或者音乐播放操作的时候,都可以才有service,根据实际情况,写成local ...

  4. 获取服务器时间ajax

    $.ajax({ type:"OPTIONS", url:"/", complete:function(x){ // alert(x.getResponseHe ...

  5. 利用三层判断sql数据库中编码是否已经存在(个人拙作,不喜勿喷)

    本人.Net新手,初学三层便想记录写笔记,以供像自己一样的新人去学习,大神就不用看啦 Dal层: /// 判断编码是否存在 /// </summary> /// <param nam ...

  6. layui——上传图片，并实现放大预览

    一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...

  7. JAVA基础之——JDK分析io、nio

    在哪儿:jdk\jre\lib\rt.jar package java.io;   package java.nio; 1 分类 1.1 IO 持久化序列化对象并压缩步骤 new FileOutput ...

  8. Django(二)：url和views

    网络通讯的本质是socket,从socket封装到MVC模式,参见另外几篇博客.本节笔记整理自Django2.0官方文档. 一.url调度器 - django.urls.path django2.0中 ...

  9. 闲谈：乌云上那些 web-based 的 QQ 漏洞

    0×00 起始 昨日凌晨,看到爱尖刀团队发布了一条“腾讯客户端XSS,已第一时间提交至TSRC”的微博,心想,腾讯又出此类漏洞了.今日,由于有一位名叫“阿布”的同学将该漏洞发布到了乌云,引来不少争吵甚 ...

  10. Java线程唤醒与阻塞

    阻塞指的是暂停一个线程的执行以等待某个条件发生(如某资源就绪),学过操作系统的同学对它一 定已经很熟悉了.Java 提供了大量方法来支持阻塞,下面让我们逐一分析. 转载于:http://blog.cs ...