zoukankan      html  css  js  c++  java
  • AngularJs入门篇-控制器的加深理解基础篇

    下面做的是一个更新时间的效果,每一秒钟就会更新一下,视图中会显示出当前的时间

     

    下面的这个例子中,SceondController函数将接受两个参数,既该DOM元素的$scope和$timeout。

    可以将视图中clock变量用{{}}包起来,以显示$scope中的clock的值。

    ///////////////  THML

    <div ng-controller="SceondController">

      <h5>{{ clock }}</h5>

    </div>

    ///////////////  SCRIPT

    <script type="text/javascript">

      angular.module("myApp", []) 

        .controller("SceondController", function($scope, $timeout) {

          var updataClock = function() {

            $scope.clock = new Date();

            $timeout(function() {

              updataClock();

            }, 1000);

          };

          updataClock();

        });

    </script>

     

    //数据绑定的最佳实践

    由于JavaScript自身的特点,以及它在传值和引用时的不同处理方式,通常认为,在视图中通过对象的属性

    而非对象本身来进行引用绑定,是AngularJS的最佳实践。

    那么如果把这个最佳实践应用到上面的那个时钟效果上,那么需要把视图中的代码写成如下这个样子:

    angular.module("myApp", [])

        .controller("SceondController", function($scope) {

          $scope.clock = {

            now: new Date()

          };

          var updataClock = function() {

            $scope.clock.now = new Date();

          };

          setInterval(function() {

            $scope.$apply(updataClock);

          }, 1000);

          updataClock();

        });

    *或许这个时候不知道什么时候用$apply,那么我会单独的找点资料,为解释它的用法。目前只需要不添加它,是实现不了的就可以了。

    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    thinkphp 视图定义
    ThinkPHP支持模型的分层
    thinkphp 虚拟模型
    thinkphp 参数绑定
    thinkphp 自动完成
    thinkphp 自动验证
    thinkphp 子查询
    thinkphp 动态查询
    ThinkPHP sql查询
    thinkphp 统计查询
  • 原文地址:https://www.cnblogs.com/mcat/p/4184656.html
Copyright © 2011-2022 走看看