Question

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

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

为了简化问题，我将其分解为：

整个App with 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>

控制器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中更改某些内容，我想更新与controller1连接的html。

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

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

非常感谢你。

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

Angular connect 2 Controller通过1 Service使用ES6语法

1 个答案: