一、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中字符串（String）的存储和赋值原理

    可能很多Java的初学者对String的存储和赋值有迷惑,以下是一个很简单的测试用例,你只需要花几分钟时间便可理解. 1.在看例子之前,确保你理解以下几个术语: 栈:由JVM分配区域,用于保存线程执行 ...

  2. 撩课-Java每天10道面试题第5天

    41.Iterator.ListIterator 和 Enumeration的区别? 迭代器是一种设计模式, 它是一个对象, 它可以遍历并选择序列中的对象, 而开发人员不需要了解 该序列的底层结构. ...

  3. HDU 1575 Tr A----矩阵相乘题。

    Tr A Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. Rafy中的EventBus

    EventBus主要是干嘛使的,直接翻译叫事件总线. 是观察者模型的实现,利用它你既可以实现观察者模型的业务场景,还可以基于它的事件驱动机制来实现应用程序内组件之间的解耦与通信. 我们来看看有Even ...

  5. CodeForces 614A（水题）

    这道题有个需要注意的地方,就是范围大小 2^16 = 65535,2^32 = 65535(10^4),2^16 = 4294967295(10^9),2^64=9223372036854775807 ...

  6. eclipse中实现文本换行

    Eclipse 使用系统内置的“ Text Editor ”做为文本编辑器,这个文本编辑器有一个问题,就是文本无法换行. 扩展插件 WordWrap 可以实现文本换行         安装方法:    ...

  7. 4.5&4.7联考题解

    本来想加个密码的,后来一想全HE就咱们这几个人,外省的dalao愿看也没事儿,就公开算了,省得加密码各种麻烦. 先补这两天的题解吧……如果有空的话我可能会把上次联考的题解补上= =(中午没睡觉,现在困 ...

  8. 前端面试经典题目（HTML+CSS）二

    1.浏览器页面由哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层 分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaSc ...

  9. Django之ModelForm使用

    一:什么是ModelForm呢? Model + Form ==> ModelForm.model和form的结合体,所以有以下功能: 数据验证 数据库操作 model有操作数据库的字段,for ...

  10. redhat系统下三种主要的软件包安装方法

    1. 通过RPM软件包来安装 RPM(Redhat Package Management)标准的软件包,只需简单地输入命令“rpm -ivh filename.rpm”即可: 如果需要对已经安装的RP ...