Question

Yallo，

我有以下代码段。

我想要一个解释，也许是一个更好的解决方案，为什么这不起作用我有怀疑。首先，我将$scope.message绑定到服务var等效messageToggle()。然后我触发了计时器功能timer。但$scope.message不会随之更新。我试图在服务中使用该方法的原因是因为我通过我的代码使用了相当大的计时器。

角

var app = angular.module('myApp', [])

    app.controller('Ctrl', function($scope, Service){
      $scope.status = "words"
      $scope.message = Service.getMessage()
      Service.timer()
    })

    app.service('Service', function($timeout){
      var messageToggle = false

      return {
        getMessage: function(){
          return messageToggle
        },
        timer: function(){
          messageToggle = true;
          $timeout(function (messageToggle = false) {}, 2000)
        }
      }
    })

HTML

<!DOCTYPE html>
<html>

  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp">
      <div ng-controller="Ctrl">
        <span ng-show="message"> {{status}} </span>
      </div>
    </div>
  </body>

</html>

Answer 1

我们需要在这里改变的第一件事是使用angular.factory而不是angular.service因为我们正在返回一个对象，service是构造函数而工厂不是这样，这两者的语法之间的区别是：

app.service('myService', function() {

  // service is just a constructor function

  this.sayHello = function(name) {
     return "Hi " + name + "!";
  };
});

app.factory('myFactory', function() {

  // factory returns an object
  // you can run some code before

  return {
    sayHello : function(name) {
      return "Hi " + name + "!";
    }
  }
});

现在，第二个更改是将messageToggle中的更改从服务通知给控制器，为此，一个选项是处理从$timeout返回的承诺。

所以这是语法：

var getPromise = function () {
    return $timeout(function() {
        // logic here
      }, 2000);
}

在调用函数中，我们需要处理它：

 getPromise().then(
        function(success){
       },function(error){
       });

最后，这是您的代码的工作插件：

https://plnkr.co/edit/4PDuY3KgwCe7F5Ys12A6?p=preview

其中状态在2000msecs中可见，然后变为不可见。

Answer 2

它不起作用，因为$scope.message = Service.getMessage()不会使$scope.message引用Service.getMessage()值，而只是最终复制它。因此，尽管Service.getMessage()值发生了变化，$scope.message中的副本却没有变化，角度机械也无法获得变化。

您需要传播更改。一种选择：

app.controller('Ctrl', function($scope, Service){
  $scope.status = "words"
  $scope.message = Service.getMessage()
  Service.timer()

  $scope.$watch(function() {return Service.getMessage()}, function(message){
    $scope.message = message;
  });
})

我们在这里添加了一个“手动”手表，会在更改观察值message时更新范围变量Service.getMessage()。

Live example

服务范围中的超时指令

2 个答案: