Angular 使用 ES6 语法通过 1 个服务连接 2 个控制器答案

【问题标题】：Angular connect 2 Controller through 1 Service with ES6 syntaxAngular 使用 ES6 语法通过 1 个服务连接 2 个控制器
【发布时间】：2016-02-07 16:53:26
【问题描述】：

我已经开始使用带有 Angular 的 ES6 语法，我对它很满意。直到我尝试通过服务连接两个控制器。

问题不在于将服务注入控制器。这很好用。我要解决的问题是，更改控制器 1 中的变量，这反过来又由控制器 2 触发的服务中变量的更改触发。

为了简化问题，我会这样分解：

带有控制器1的整个应用程序

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

控制器1：

    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;

控制器2：

 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;

我的问题是，angular 不会观察服务 GlobalLoading 中变量 page_loading 的变化。如果控制器 2 更改服务 GlobalLoading 中的某些内容，我想更新与控制器 1 连接的 html。

我一直认为 Angular 会自动监视通过服务注入的所有变量，显然它不会。

我将如何解决这个问题？如果有人可以帮助我或为我指明正确的方向，我会非常高兴。

已经非常感谢你了。

【问题讨论】：

标签： javascript angularjs service ecmascript-6

【解决方案1】：

我自己的问题解决了

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

【讨论】：