Question

我不确切知道这里的问题是什么，但是我试图建立一个与此类似的服务（但是，在更复杂的范围内），该示例显示了问题

基本上，我希望能够做一些像

这样的事情

$myService.init().then($myService.print);

并接收输出Hello world，但输出为undefined。例如：

＆＃13;

angular.module('myService', [])
  .service('$myService', ['$q',
    function($q) {
      this.variable = null;
      this.init = function() {
        return $q(function(resolve, reject) {
          this.init = "Hello world";
          resolve(null);
        });
      };

      this.print = function() {
        alert(this.variable);
      };

    }
  ]);

angular.module('app', ['myService']).controller('Controller', function($myService) {
  $myService.init().then($myService.print);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<div ng-app='app' ng-controller='Controller'>...</div>

＆＃13;

Answer 1

似乎与您对this关键字有点混淆在javascript中this指的是函数上下文，它取决于函数的调用方式。

所以，这里

this.init = function() {//here this referes to service object,
  return $q(function(resolve, reject) {
    this.init = "Hello world";//and here this refers to promise, and not to service object.
    resolve(null);
  });
};

也是，在这种情况下

$myService.init().then($myService.print);

到then传递了对函数的引用，而函数内的this引用了Promise对象。

另一个错误：您只需在代码中分配variable一次，因此它总是 null 。

旁注：不使用 alert 进行调试，因为它会阻塞主线程，因此在显示警报之前，任何promises或async函数都无法解析。

所以你可以在下面的代码片段中修复所有内容。

＆＃13;

angular.module('myService', [])
  .service('$myService', ['$q',
    function($q) {
      var that = this;//save reference to service object for using in $q callback
      this.variable = null;
      this.init = function() {
        return $q(function(resolve, reject) {
          that.variable = "Hello world";//assign to variable instead init, also use that instead this
          resolve(null);
        });
      };

      this.print = function() {
        console.log(this.variable);//output to console instead show alert
      };

    }
  ]);

angular.module('app', ['myService']).controller('Controller', function($myService) {
  $myService.init().then($myService.print.bind($myService));//pass to then function with this binded to service object
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<div ng-app='app' ng-controller='Controller'>www</div>

＆＃13;

Answer 2

＆＃13;

angular.module('myService', [])
  .service('$myService', ['$q',
    function($q) {
      this.variable = null;
      this.init = function() {
        return $q(function(resolve, reject) {
          this.init = "Hello world";
          this.variable = "Hello world";
          resolve(null);
        });
      };

      this.print = function() {
        alert(this.variable);
      };

    }
  ]);

angular.module('app', ['myService']).controller('Controller', function($myService) {
  $myService.init().then($myService.print);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<div ng-app='app' ng-controller='Controller'>www</div>

＆＃13;

AngularJS - 服务变量未定义

2 个答案: