从 AngularJS 中的服务属性更新$scope

update $scope from service property in angularJS

本文关键字：更新 scope 属性 服务 AngularJS      更新时间：2023-09-26

我是AngularJS的新手，我想知道为什么在下一段代码中，服务的"randomN"属性在$scope没有更新。由于我在控制器上引用了对象的服务 

$scope.srvRandom = srvRandom;

为什么srvRandom.randomN的更改没有生效？

我认为问题是"randomN"取了"r"的值而不是对它的引用，但我不知道如何让它工作。

var app = angular.module("app", []);
    app.controller("cont", ['$scope','srvRandom', function ($scope, srvRandom) {        
    $scope.srvRandom = srvRandom;  
}]);
app.factory("srvRandom", ["$interval", function ($interval) {
    var randomCreator;
    var r;
    return {
        start: function () {
            console.log("START")
            randomCreator = $interval(function () {
                r= Math.random() * 10;
            }, 2000);
        },
        stop: function () {
            console.log("STOP")
            $interval.cancel(randomCreator);
        },
        randomN: r
    };
}]);

.HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
    <script src="test.js"></script>
</head>
<body ng-app="app" ng-controller="cont">        
    RandomNumber: {{srvRandom.randomN}}
    <div>
        <button ng-click="srvRandom.start()">START!</button>
        <button ng-click="srvRandom.stop()">STOP!</button>
    </div>
</body>
</html>

谢谢！

您正在访问始终0 srvRandom.randomN。

...
randomN: 0
...

我认为你应该这样做

app.factory("srvRandom", ["$interval", function ($interval) {
    var randomCreator,
        randomN = 0;          // Change
    return {
        start: function () {
            console.log("START")
            randomCreator = $interval(function () {
                randomN = Math.random() * 10;
            }, 2000);
        },
        stop: function () {
            console.log("STOP")
            $interval.cancel(randomCreator);
        },
        randomN: randomN          // Change
    };
}]);

只需更新启动方法以将其用于当前对象而不是窗口对象。

start: function() {
   var that = this; //store this reference to a variable
   randomCreator = $interval(function() {
       that.randomN = Math.random() * 10; // use here
   }, 2000);
},

这样做$scope.Random = srvRandom;创建服务 obj 的本地实例

var app = angular.module("app", []);
app.controller("cont", ['$scope', 'srvRandom',
  function($scope, srvRandom) {
    
    $scope.random = 0;
    
    $scope.$watch('getRandom()',function(newv){
        $scope.random = newv;
    });
    $scope.start = function(){
      srvRandom.start();
    }
    $scope.stop = function(){
      srvRandom.stop();
    }
    $scope.getRandom = function(){
      return srvRandom.getRandom();
    }
  }
]);
app.factory("srvRandom", ["$interval",
  function($interval) {
    var randomCreator;
    var randomN = 0;
    return {
      start: function() {
        console.log("START")
        randomCreator = $interval(function() {
          randomN = Math.random() * 10;
        }, 2000);
      },
      stop: function() {
        console.log("STOP")
        $interval.cancel(randomCreator);
      },
      getRandom: function() {
        return randomN;
      }
    };
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="cont">
  RandomNumber: {{random}}
  <div>
    <button ng-click="start()">START!</button>
    <button ng-click="stop()">STOP!</button>
  </div>
</body>

相关文章：