美文网首页
angular中的$watch和服务

angular中的$watch和服务

作者: yscmh | 来源:发表于2018-11-04 21:09 被阅读0次

    $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)
    }])

    相关文章

      网友评论

          本文标题:angular中的$watch和服务

          本文链接:https://www.haomeiwen.com/subject/vcmdxqtx.html