AngularJS1.X学习笔记2-数据绑定

  上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性。本次学习的是数据绑定。应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP、struts等,只有实现了数据绑定才能将模型层和视图层分离,实现MVC。Angular的数据绑定比较特别,它支持双向数据绑定。

1、ng-bind

 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <h1 ng-controller=‘dataCtrl‘ ng-bind=‘data‘>

    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

  ng-bind实现了一个简单单向绑定。

2、{{}}

  类似ng-bind,用的比较多。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <h1 ng-controller=‘dataCtrl‘>
        {{data}}
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

  这种绑定的缺点是,开始加载时可能会出现类似{{data}}这样的东西。

  解决方法是使用ng-bind或ng-cloak,ng-cloak应该只在有数据绑定的地方使用,否则处理中用户将看到空白。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding2</title>
</head>
<body ng-cloak>
    <h1 ng-controller=‘dataCtrl‘>
        {{data}}
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

  我测试了一下ng-cloak,不知道为什么不行,有人知道的话请告知一下。

3、ng-bind-html

  这个指令可以用html的方式处理数据,它不会将html代码解析成实体。下面对比一下ng-bind和ng-bind-html.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller=‘dataCtrl‘ ng-bind=‘data‘>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope){
            $scope.data = "<h1 style=‘color:red;‘>你好啊</h1>";
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller=‘dataCtrl‘ ng-bind-html=‘data‘>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope){
            $scope.data = "<h1 style=‘color:red;‘>你好啊</h1>";
        })
    </script>
</body>
</html>

  换成ng-bind-html时出错了

  这是因为Angular默认是不信任html的,所以要这样做。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller=‘dataCtrl‘ ng-bind-html=‘data‘>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope,$sce){
            $scope.data = $sce.trustAsHtml("<h1 style=‘color:red;‘>你好啊</h1>");
        })
    </script>
</body>
</html

  这样就可以了。

4、ng-bind-template

  ng-bind只接受单个数据绑定表达式,而ng-bind-template则相对灵活些。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding3</title>
</head>
<body>
    <div ng-controller=‘dataCtrl‘ ng-bind-template=‘{{data1}}爱{{data2}} ‘>

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope,$sce){
            $scope.data1 = "我";
            $scope.data2 = "中国";
        })
    </script>
</body>
</html><!-- 我爱中国-->

5、ng-non-bindable

  有时我们使用了{{}}但是我们并不是要绑定数据,直接用会出错,所以要像这样

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <h1 ng-controller=‘dataCtrl‘ ng-non-bindable>
        ng中绑定数据的方法是{{data}}
    </h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope){
            //$scope.data = "你好啊!";
        })
    </script>
</body>
</html>

6、双向数据绑定ng-model

  双向数据绑定允许元素从用户处收集数据以改变程序状态。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding5</title>
</head>
<body>
    <div ng-controller=‘dataCtrl‘>
        <h1>{{data}}</h1>
        <input type="text" name="data" ng-model="data">
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘,[])
        .controller(‘dataCtrl‘,function($scope){
            $scope.data = "你好啊!";
        })
    </script>
</body>
</html>

  你会发现文本框的内容和h1中的内容同步变化。

7、小结一下

  与数据绑定的相关指令如下

  

  下面开始学习模板指令。2017-03-31 20:41:59

时间: 2024-09-30 21:11:16

AngularJS1.X学习笔记2-数据绑定的相关文章

Vue.js学习笔记: 数据绑定语法---插值

文本:数据绑定最基础的形式就是文本插值,使用一对双大括号 双大括号标签会被相应数据对象的msg属性的值替换,每当这个属性变化时它也会更新 HTML: <span id="test01">Message:{{msg}}</span> JS: var vm = new Vue({     el:'#test01',     data:{         msg:'数据绑定语法--文本插值'     } }); 也可以只处理单次插值,今后的数据变化就不会再引起插值更新

AngularJS1.X学习笔记6-控制器和作用域

经过一番艰苦卓绝的鏖战,我终于来到了控制器和作用域部分.控制器作为MVC的C,其重要性不可谓不重要:作用域决定了你可以拿到哪些东西,亦是分外重要.现在就来学习一下两个东西.去看看$apply,$watch,$broadcast是个什么鬼. 一.谈谈MVC 阮一峰老师说Angular是一个叫MVVM的模式(http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html),而自由男人说这是一个MVC框架,个人认为都差不多,目标都是分层,便于协作和维护,

AngularJS1.X学习笔记13-动画和触摸

本文主要涉及了ngAnimation和ngTouch模块,自由男人讲的比较少,估计要用的时候还要更加系统的学习一下. 一.安装 没错,就是酱紫. 二.玩玩动画 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>route test</title> <s

AngularJS1.X学习笔记8-自定义指令(上)

AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较复杂的,下面开始攻关. 一.三个重要参数 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> &l

AngularJS1.X学习笔记7-过滤器

最近参加笔试被虐成狗了,感觉自己的算法太弱了.但是还是先花点事件将这个AngularJS学习完.今天学习filter 一.内置过滤器 (1)过滤单个数据值 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>内置过滤器-过滤单个数据值</title> <

SpringMVC 学习笔记(六) 数据绑定和JSR校验

① Spring MVC 主框架将 ServletRequest 对象及目标方法的入参实例传递给 WebDataBinderFactory 实例,以创建 DataBinder 实例对象 ② DataBinder 调用装配在 Spring MVC 上下文中的ConversionService 组件进行数据类型转换.数据格式化工作.将 Servlet 中的请求信息填充到入参对象中 ③ 调用 Validator 组件对已经绑定了请求消息的入参对象进行数据合法性校验,并最终生成数据绑定结果Binding

AngularJS1.X学习笔记11-服务

如果我没记错的话,spring里边有个service层.什么是服务呢?个人理解就是很多地方要用的,可以跨越控制器甚至是跨越模块的工具.AngularJS也为我们提供了服务这种机制,这让我们可以将一些不属于某个控制器独有的东西定义成一个服务,要用的时候直接拿过来就好.使用服务有什么好处呢?一是便于统一修改,二是调用者不用关心内部实现,三是便于测试. 一.factory <!DOCTYPE html> <html lang="en" ng-app='myApp'>

Vue.js学习笔记: 数据绑定语法---绑定表达式

1.JavaScript表达式 放在双大括号标签内的文本称为绑定表达式.在Vue.js中,一段绑定表达式由一个简单的JS表达式和可选的一个或多个过滤器构成 HTML: <span id="test01">数字加减:{{number+1}}</span><br> <span id="test02">三目运算:{{ok?'yes':'no'}}</span><br> <span id=&quo

AngularJS1.X学习笔记10-自定义指令(下)

继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:"默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素".果然像是绕口令,还是看看你的例子比较好. 一.在一个控制器中应用同一指令 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"&