angular中的$watch和服務

$watch 監(jiān)視數(shù)據(jù)模型的變化

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

      // $watch可以用來監(jiān)視數(shù)據(jù)模型的變化
      // 第一個參數(shù): 數(shù)據(jù)模型對應的名字(字符串形式)
      // 第二個參數(shù): 相應的數(shù)據(jù)模型變化就會調用 這個函數(shù)
      // 默認會直接執(zhí)行一次回調函數(shù)
      $scope.$watch('name',function(now,old){
        // 第一個參數(shù)是變化后的值
        // 第二個參數(shù)是變化前的值
        // console.log(now,old)
      })
  • 也可以監(jiān)視方法的返回值
    $scope.getAge = function(){
        return $scope.age
      }
      
      // 也能夠監(jiān)視$scope.屬性中的方法的返回值
      $scope.$watch('getAge()',function(now,old){
        console.log(now,old)
      })

    //*$watch監(jiān)視的是$scope的屬性,如果是一個普通變量是無法監(jiān)視的*
      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.創(chuàng)建模塊
    var app = angular.module('hello', [])
   // 2.創(chuàng)建控制器
  app.controller('helloController',['$scope',function($scope){
  $scope.name = '小明'
  $scope.age = 18
  // $watch可以用來監(jiān)視數(shù)據(jù)模型的變化
  // 第一個參數(shù): 數(shù)據(jù)模型對應的名字(字符串形式)
  // 第二個參數(shù): 相應的數(shù)據(jù)模型變化就會調用 這個函數(shù)
  // 默認會直接執(zhí)行一次回調函數(shù)
  $scope.$watch('name',function(now,old){
    // 第一個參數(shù)是變化后的值
    // 第二個參數(shù)是變化前的值
    // console.log(now,old)
  })
  $scope.getAge = function(){
    return $scope.age
  }   
 // 也能夠監(jiān)視$scope.屬性中的方法的返回值
  $scope.$watch('getAge()',function(now,old){
    console.log(now,old)
  })
  //*$watch監(jiān)視的是$scope的屬性,如果是一個普通變量是無法監(jiān)視的*
  function getName(){
    return $scope.name
  }
  $scope.tmp = getName
  $scope.$watch('tmp()',function(now,old){
    console.log(now,old)
  })
}])
 </script>
</body>
 </html>

服務

  • 創(chuàng)建服務
    // 1.創(chuàng)建服務模塊
  var app = angular.module('service',[])

  // 2.創(chuàng)建服務
  // 第一個參數(shù):服務的名字
  // 第二個參數(shù)里的function: 
  //    angular會把這個function當作構建函數(shù),angular會幫助我們new這個構建函數(shù),然后得到一個對象。A,B
  app.service('MyService', [function(){
    this.name = '小明'
  }])
  • 使用服務
    // 1.創(chuàng)建模塊
  var app = angular.module('todosApp', ['service'])
  // 2.創(chuàng)建控制器
  app.controller('todosController', [
    'MyService'
    , function(MyService){
    // 這個MyService就是,對應的'MyService'時的回調函數(shù)new出的對象
    console.log(MyService)
}])
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,506評論 19 139
  • 關于Mongodb的全面總結 MongoDB的內部構造《MongoDB The Definitive Guide》...
    中v中閱讀 32,275評論 2 89
  • 今天是擴張的一天,和孫與胡在一個三人小組,由于我們的價值觀和模式有許多不同,所以在做積極傾聽和自然同理中很難做到,...
    我和榕樹閱讀 127評論 0 0
  • 2018-08-14 承迪柴迪迪 公司:寧波市鎮(zhèn)海承迪文具有限公司 【日精進打卡第126天】 一:【知~學習】 《...
    承迪柴閱讀 298評論 0 0
  • 午加餐:麥片晚水果:西瓜 參考目標: 1份豆2份肉3份“新鮮”水果4份谷物/薯5份蔬菜,深綠色葉菜最好6杯水 今日...
    靜趣_兒童心理師閱讀 277評論 0 0

友情鏈接更多精彩內容