angular中的$watch和服务

$watch 监视数据模型的变化

    $scope.name = '小明'
      $scope.age = 18

      // $watch可以用来监视数据模型的变化
      // 第一个参数: 数据模型对应的名字(字符串形式)
      // 第二个参数: 相应的数据模型变化就会调用 这个函数
      // 默认会直接执行一次回调函数
      $scope.$watch('name',function(now,old){
        // 第一个参数是变化后的值
        // 第二个参数是变化前的值
        // console.log(now,old)
      })
  • 也可以监视方法的返回值
    $scope.getAge = function(){
        return $scope.age
      }
      
      // 也能够监视$scope.属性中的方法的返回值
      $scope.$watch('getAge()',function(now,old){
        console.log(now,old)
      })

    //*$watch监视的是$scope的属性,如果是一个普通变量是无法监视的*
      function getName(){
        return $scope.name
      }
      $scope.tmp = getName
      $scope.$watch('tmp()',function(now,old){
        console.log(now,old)
      })

$watch具体代码

  <!DOCTYPE html>
  <html lang="en">
 <head>
 <meta charset="UTF-8">
    <title>$watch</title>
</head>
<body ng-app="hello">
  <div ng-controller="helloController">
  <input type="text" ng-model="name">
  <input type="text" ng-model="age">
<button>测试</button>
 </div>
 <script src="libs/angular.js"></script>
 <script>
    // 1.创建模块
    var app = angular.module('hello', [])
   // 2.创建控制器
  app.controller('helloController',['$scope',function($scope){
  $scope.name = '小明'
  $scope.age = 18
  // $watch可以用来监视数据模型的变化
  // 第一个参数: 数据模型对应的名字(字符串形式)
  // 第二个参数: 相应的数据模型变化就会调用 这个函数
  // 默认会直接执行一次回调函数
  $scope.$watch('name',function(now,old){
    // 第一个参数是变化后的值
    // 第二个参数是变化前的值
    // console.log(now,old)
  })
  $scope.getAge = function(){
    return $scope.age
  }   
 // 也能够监视$scope.属性中的方法的返回值
  $scope.$watch('getAge()',function(now,old){
    console.log(now,old)
  })
  //*$watch监视的是$scope的属性,如果是一个普通变量是无法监视的*
  function getName(){
    return $scope.name
  }
  $scope.tmp = getName
  $scope.$watch('tmp()',function(now,old){
    console.log(now,old)
  })
}])
 </script>
</body>
 </html>

服务

  • 创建服务
    // 1.创建服务模块
  var app = angular.module('service',[])

  // 2.创建服务
  // 第一个参数:服务的名字
  // 第二个参数里的function: 
  //    angular会把这个function当作构建函数,angular会帮助我们new这个构建函数,然后得到一个对象。A,B
  app.service('MyService', [function(){
    this.name = '小明'
  }])
  • 使用服务
    // 1.创建模块
  var app = angular.module('todosApp', ['service'])
  // 2.创建控制器
  app.controller('todosController', [
    'MyService'
    , function(MyService){
    // 这个MyService就是,对应的'MyService'时的回调函数new出的对象
    console.log(MyService)
}])
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,268评论 19 139
  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,098评论 2 89
  • 今天是扩张的一天,和孙与胡在一个三人小组,由于我们的价值观和模式有许多不同,所以在做积极倾听和自然同理中很难做到,...
    我和榕树阅读 115评论 0 0
  • 2018-08-14 承迪柴迪迪 公司:宁波市镇海承迪文具有限公司 【日精进打卡第126天】 一:【知~学习】 《...
    承迪柴阅读 279评论 0 0
  • 午加餐:麦片晚水果:西瓜 参考目标: 1份豆2份肉3份“新鲜”水果4份谷物/薯5份蔬菜,深绿色叶菜最好6杯水 今日...
    静趣_儿童心理师阅读 256评论 0 0