angularjs笔记
  • Introduction
  • 依赖注入
  • 作用域
  • 数据绑定
    • 控制器->模板->控制器->模板
  • 多个控制器
  • $scope对象
    • $apply方法、$digest方法
    • $watch方法
    • 示例:购物车
  • 模块和控制器
  • $provide对象的provider、factory、service方法
    • 多个控制器内共享数据
  • 过滤器(Filters)
    • number、currency、date
    • limitTo、lowercase、uppercase
    • filter、orderBy、json
    • 示例:产品列表
    • 自定义过滤器
  • 控制器(controller)
    • 显式和隐式依赖注入
  • 指令
    • Angular 内置指令
    • Angular 自定义指令
      • restrict、template、replace属性
      • templateUrl属性
      • transclude、priority、terminal属性
      • compile && link属性
      • controller && controllAs属性
      • require属性
      • scope属性
  • Module里其他方法
    • constant、value、run方法
  • Form表单
    • 示例:注册页
  • XHR和服务器端的通信
    • $http
  • JavaScript基础
    • .isFunction是否为函数
  • 资料链接
  • 功能组件
    • Tooltip
    • CSV
  • 其他
    • $watchCollection
    • $controller 继承
    • 两个对象合并
    • 页面关闭
    • AngularJs 时间格式化处理
    • 数据的本地存储
    • 页面的URL
Powered by GitBook
On this page
  • 经典模板系统中的数据绑定
  • Anguarjs 模板中的数据绑定

Was this helpful?

数据绑定

Previous作用域Next控制器->模板->控制器->模板

Last updated 6 years ago

Was this helpful?

  • 数据绑定可自动将model和view间的数据同步。

  • Angular实现数据绑定的方式,可以让我们把model当作程序中唯一可信的数据来源。view始终是model的投影。当model发生变化时,会自动反映到view上。

  • Angular的 ng 的一大特点,就是数据双向绑定。

经典模板系统中的数据绑定

  • 大多数模板系统中的数据绑定都是单向的

  • 把模板与model合并在一起变成view,如果在合并之后,model发生了变化,不会自动反映到view上。

  • 用户在view上的交互也不会反映到model中,开发者必须写大量代码不断地在view与model之间同步数据。

Anguarjs 模板中的数据绑定

  • 模板是在浏览器中编译的,在编译阶段产生了一个实时更新(live)的视图

  • 不论在model或是view上发生了变化,都会立刻反映到对方。

  • model成为程序中唯一真实的数据来源,极⼤大地简化了开发者需要处理的编程模型。*

数据双向绑定例子:

<body ng-app>

    <!--
        view => 12131
        model => 12131
        3个 view
        数据是双向绑定的
    -->
    <input type="text" ng-model="name" value=""/>

    <!--angular的表达式-->
    {{ name }}

    <input type="text" ng-model="name" value=""/>

   <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</body>

效果: