Угловое соединение 2 Контроллер через 1 Сервис с синтаксисом ES6

Я начал использовать синтаксис ES6 с угловым и был доволен этим. Пока я не попытался подключить два контроллера через службу.Угловое соединение 2 Контроллер через 1 Сервис с синтаксисом ES6

Проблема не была введена в эксплуатацию в контроллер. Это прекрасно работает. Проблема, которую я хочу решить, заключается в изменении переменной в контроллере1, которая, в свою очередь, инициируется изменением переменной в Сервисе, которая запускается контроллером2.

Для упрощения задачи я буду разбить его так:

Весь App с controller1

<html lang="en-US" ng-app="app" ng-controller="PageController as pagectrl"> 
    <div ng-show="pagectrl.page_loading" class="containerLoading"> 
     <div class="icon"> 
      <i class="fa fa-spinner fa-pulse"></i> 
     </div> 
    </div> 
    </html>

controller1:

class PageController { 
     constructor($scope, $state, GlobalLoading){ 
      this.$scope = $scope; 
      this.$state = $state; 
    //GlobalLoading is the service I injected 
      this.globalLoading = GlobalLoading; 
    //this.page_loading is the variable I want to update if GlobalLoading.page_loading changes 
      this.page_loading = true; 

      this.$scope.$watch(this.globalLoading.page_loading, this.pageLoadingChanged()); 
     } 
     pageLoadingChanged(newValue,oldValue){ 
      console.log("pageLoadingChanged"); 
      return()=>{ 
       console.log(newValue); 
       this.page_loading = newValue; 
      }; 
     } 
    } 
    export default PageController;

controller2:

import RedditApi from 'src/common/services/reddit_api' 
import ExtractGifsAndTitle from 'src/common/services/extract_gifs_and_title' 
import ExtractPicsAndTitle from 'src/common/services/extract_pics_and_title' 
import RedditModi from 'src/common/utils/reddit_modi' 


    class PostsController { 
     constructor($scope, $state, GlobalLoading){ 
      this.$scope = $scope; 
      this.$state = $state; 
      this.globalLoading = GlobalLoading; 
      this.getUrl(); 
     } 
     getUrl(){ 
      //some stuff and then 

      this.loadPosts(modi) 

     } 
     loadPosts(modi){ 
    //Here I set the value for page_loading in the service 
      this.globalLoading.setPageLoading(true); 
    //Some stuff happend 
      this.loadGifs(url) 
     } 
     loadGifs(url){ 
// Now this part happens async through a promise 
      RedditApi.load(url) 
      .then(posts => ExtractGifsAndTitle.extract(posts)) 
      .then(posts => this.addPosts(posts)); 
     } 
     addPosts(posts){ 
    // Again I change the value of page_loading in the service. This time back to false 
      this.globalLoading.setPageLoading(false); 
      this.posts = posts; 
      this.$scope.$apply(); 
     } 
    } 

    export default PostsController;

е р в:

class GlobalLoading{ 
     constructor(){ 
      this.page_loading = false; 
     } 
     setPageLoading(set){ 
      this.page_loading = set; 
     } 

    } 

    export default GlobalLoading;

Моя проблема в том, что угловая не следит за изменениями переменной page_loading в GlobalLoading службы. Я хочу обновить html, связанный с контроллером1, если контроллер 2 что-то изменит в сервисе GlobalLoading.

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

Как я могу решить проблему? Я был бы очень рад, если бы кто-то помог мне или указал мне в правильном направлении.

Большое вам спасибо.

источник

2016-02-07 Sakramento

я решил моя собственная проблема

Измененное PageController к:

class PageController { 
     constructor($scope, $state, GlobalLoading){ 
      this.$scope = $scope; 
      this.$state = $state; 
    //GlobalLoading is the service I injected 
      this.globalLoading = GlobalLoading; 
    } 
    export default PageController;

И мой Html к:

<html lang="en-US" ng-app="app" ng-controller="PageController as pagectrl"> 
    <div ng-show="pagectrl.globalLoading.page_loading" class="containerLoading"> 
     <div class="icon"> 
      <i class="fa fa-spinner fa-pulse"></i> 
     </div> 
    </div> 
    </html>

источник

2016-02-13 19:32:56 Sakramento

Угловое соединение 2 Контроллер через 1 Сервис с синтаксисом ES6

ответ

Смежные вопросы