AngularJS 服务传递值

Question

服务：

app.factory("MessageService", ["$timeout", function($timeout) {
  return function(message) {

    $timeout(function() {
        //    $scope.fadeMessageSuccess = true;
        console.log("Test");
    }, 2000);

    return message;
  }
}]);

控制器中的代码：

var message = {
      type: "success",
      title: "Message Title",
      content: "Message Content"
    }
$scope.model = MessageService(message);

查看：

<div ng-controller="AccountCtrl" ng-cloak="">
  <div class="ui {{model.type}} message message-overwrite"
       ng-class="{'fade': fadeMessageSuccess} ">
    <i class="close icon"></i>
    <div class="header">
      {{model.title}}
    </div>
    <p>{{model.content}}</p>
  </div>
</div>

基本上，我试图弄清楚如何将true 的值传递给控制器​​内部的$scope.fadeMessageSuccess。由于您不能在服务内使用 $scope，我不确定如何在 $timeout 函数内传递值。

Answer 1

该服务不是很有用：它接受一个值作为参数，并返回该值。

要在延迟后执行某些代码，请将这些代码包装在一个函数中并将其传递给$timeout()，或将其传递给$timeout() 返回的promise 的.then() 方法。

$timeout(function() {
    $scope.fadeMessageSuccess = true;
}, 2000);

或者

$timeout(angular.noop, 2000).then(function() {
    $scope.fadeMessageSuccess = true;
});

如果你真的想将 $timeout 隐藏到你自己的服务中，那么让服务像 $timeout 一样接受一个回调函数，或者将调用返回的承诺返回给 $timeout()，以便控制器可以在返回的承诺上调用 then()：

app.factory("MessageService", ["$timeout", function($timeout) {
  return function(callback) {
    $timeout(callback, 2000);
  }
}]);

...

MessageService(function() {
    $scope.fadeMessageSuccess = true;
});

或

app.factory("MessageService", ["$timeout", function($timeout) {
  return function() {
    return $timeout(angular.noop, 2000);
  }
}]);

...

MessageService().then(function() {
    $scope.fadeMessageSuccess = true;
});