一、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如何大批量从json数据源中按指定符号隔字符串，并修改、删除数据

    原文出自:https://blog.csdn.net/seesun2012 package com.seesun2012.com; /** * Java大批量修改.删除数据,按指定标识符分隔字符串 * ...

  2. Java 防SQL注入过滤器（拦截器）代码

    原文出自:https://blog.csdn.net/seesun2012 前言 浅谈SQL注入:        所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符 ...

  3. 记Spring与跨域

    跨域 简单理解就是跨域名 (ip+端口) 在 52liming.com 中向demo.com中发起Ajax请求, 出于安全考虑会进行拦截 参考: 浏览器的同源策略 什么是JS跨域访问? 跨域资源共享 ...

  4. [LeetCode]Delete and Earn题解（动态规划）

    Delete and Earn Given an array nums of integers, you can perform operations on the array. In each op ...

  5. PHP new StdClass() 创建空对象

    PHP可以用 $object = new StdClass(); 创建一个没有成员方法和属性的空对象.很多时候,程序员们会将一些参数配置项之类的信息放在数组中使用,但是数组操作起来并不是很方便,很多时 ...

  6. 转：使用VS Code断点调试PHP

    使用VS Code断点调试PHP vs code 使用一款杰出的轻量级代码编辑器,其中的插件工具不胜枚举而且还在不断增加.使用 vs code 调试 PHP 代码更是方便简洁,下面我们来一起看一下. ...

  7. Django——REST framework

    1. 什么是REST REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类审 ...

  8. webstorm 打开后 一直停留在scanning files to index....，或跳出内存不够的提示框

    用着有时会这样,超级卡, 网上搜了下,原来如此,记录下,免得忘了. ------------------------- 说明: 在npm install 后,会出现Scanning files to ...

  9. 如何在Ubuntu上安装gcc-6.3

    装显卡驱动推荐 gcc 6.3 版本,其实linux上多个版本的gcc是可以共存的,需要的的时候切换就好,参加之前的博客 https://www.cnblogs.com/jins-note/p/951 ...

  10. Python中os.listdir的排序问题

    上周应别人要求,使用python批量修改文件名称.文件名有规律,当时就用了一个函数直接精确的用文件名替换了.后来想直接可以用listdir来遍历每个文件来修改更加通用一些.但是看了os.listdir ...