角度连接2控制器通过1服务与ES6语法

I´ve started using ES6 syntax with angular and I´ve been happy with it. Until I tried to connect two controller through a service.

我开始使用角度的ES6语法,我很满意。直到我尝试通过服务连接两个控制器。

The problem wasn´t injecting the service into the controller. That works fine. The problem I want to tackle is, changing a variable in controller1, which in turn is triggered by a change in a variable in the Service which is triggered by controller2.

问题不在于将服务注入控制器。这很好。我想解决的问题是,更改controller1中的变量,而变量又由控制器2触发的服务变量触发。

To simplify the problem I´ll break it down like this:

为了简化问题,我将其分解为:

The whole App with controller1

整个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;

The service:

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

    }

    export default GlobalLoading;

My problem is, that angular does not watch changes in the variable page_loading in the service GlobalLoading. I want to update the html connected with controller1 if controller 2 changes something in the service GlobalLoading.

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

I always thought angular would automatically watch all variables injected through a service, apparently it does not.

我一直认为angular会自动观察通过服务注入的所有变量,显然它没有。

How would I go about the problem? I would be really happy if someone could help me or point me in the right direction.

我该如何解决这个问题?如果有人可以帮助我或指出我正确的方向,我会很高兴。

Thank you so much already.

非常感谢你。

1 个解决方案

#1

I solved my own problem

我解决了自己的问题

Changed PageController to:

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

And my Html to:

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

1 个解决方案

#1

更多相关文章

随机推荐