AngularJS - служебные переменные не определены

Question

Я не знаю, в чем проблема, но я пытаюсь настроить службу, которая делает что-то похожее на это (однако, в гораздо более сложном масштабе) проблема.

В принципе, я хотел бы быть в состоянии сделать что-то вроде

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

и получить вывод о том, Hello world, однако вместо того, чтобы выход undefined. Пример:

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); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller='Controller'>...</div>

Answer 1

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); 
 
});

<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>

Answer 2

Кажется, как вы немного запутались с 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.

Sidenote: не использовать предупреждения для отладки, потому что она блокирует основной поток, так что любые обещания или асинхронные функции не будут решены, пока тревога не показаны.

Таким образом, вы можете исправить все как в фрагменте ниже.

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 
 
});

<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>