zoukankan      html  css  js  c++  java
  • Angular 笔记系列(二)数据绑定

    数据绑定这块儿没啥说的,简单两个例子带过了。

    Hello World:

    <!DOCTYPE html>
         <html ng-app>
         <head>

    <title>Simple app</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
         </head>
    
         <body>
           <input ng-model="name" type="text" placeholder="Your name">
           <h1>Hello {{ name }}</h1>
    
         </body>
         </html>

    这就是有趣的双向数据绑定,AngularJS 会记录数据模型所包含的数据在任何特定时间点的值,而不是原始值。当他认为某个值可能发生变化时,
    就会运行自己的事件循环来检查这个值是否变脏,
    如果该值从上次事件循环之后发生了变化,则该值被认为是脏值。这也是 Angular 可以跟踪和响应应用变化的方式。

    数据模型对象:这里是指$scope。它的属性可以被视图访问,也可以同控制器交互。


    数据绑定的最佳实践:
    由于 JS 本身的特点,以及他在引用和传值时的不同处理方式,通常认为,,在视图中通过对象的属性而非对象本身来进行数据绑定,是 Angular的最佳实践。

    一个简单的计时器:
    <!doctype html>

    <html ng-app>
    <head> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>

    </head>

    <body>

             <div ng-controller="MyController">
    
               <h1>Hello {{ clock.now }}!</h1>
             </div>
    

    <script type="text/javascript" src="js/app.js"></script>

    </body>

    </html> 

    //app.js

    function MyController($scope) {

             $scope.clock = {
                 now: new Date()
    
             };
             var updateClock = function() {
    
                 $scope.clock.now = new Date()
             };
    
             setInterval(function() {
                 $scope.$apply(updateClock);
          },1000)
             updateClock();
         };
    

    关于脏值检查相关请参考:
    http://www.cnblogs.com/Slim-Shady/p/5217221.html
    
    
  • 相关阅读:
    POJ 1680 Fork() Makes Trouble
    课堂改进意见
    梦断代码 读后感3
    梦断代码 读后感2
    找一问题
    软件评价——搜狗输入法
    《梦断代码》读后感1
    站立会议第十天
    站立会议第九天
    站立会议第八天
  • 原文地址:https://www.cnblogs.com/Slim-Shady/p/5594606.html
Copyright © 2011-2022 走看看