Question

我正在尝试使用ng-show通过显示或隐藏相应的div标签来设置页面导航

我设法让它工作但后来意识到我不知道如何从其他控制器触发“pageChange（）”。

经过一些谷歌搜索，我了解了服务。

所以，我现在有一个存储页面变量的服务，可以被其他控制器更改。

问题是它似乎正在重置自己用于初始化它的任何东西。我不确定为什么或如何解决它。

服务：

app.service('navigationService', function() {
    var pa = this; //pa for parent
    this.page;

    this.changePage = function(p){
        //p is the new page
        pa.page = p
        console.log(pa.page);

    };
});

NavigationController：

app.controller("navCon", ["$scope", "navigationService", function($scope, navigationService){
    var conNav = this;
    this.page = navigationService.page;  
    navigationService.changePage("login"); //initialising the service page variable as "login" also does not work

    this.digest = function(){//display something whenever a digest cycle is run

        console.log(conNav.page);
    }
}]);

当我运行页面时，日志如下所示：

login
undefined
undefined
undefined

不确定它是否相关，但这是显示/隐藏页面的位置以及调用'摘要'功能的位置：

<div class="container-fluid" ng-show="{{nav.page == 'home'}}">
    <div class="row" ng-class="{'go':nav.digest()}"><!--go is not really a class but this is the only way i know how to trigger a function with every digest-->

我对角度很新，不知道我哪里出错了，所以如果有人能在第一个日志之后看到为什么页面会变成“未定义”，请告诉我如何修复。

提前致谢

Answer 1

我希望您使用控制器作为语法，因为您使用this来访问控制器实例

您遇到的问题是您正在访问

navigationService.page

在使用

进行设置之前

navigationService.changePage("login")

首先调用服务方法，然后访问服务属性。

Answer 2

您可以在控制器中监听$ stateChange事件，然后调用您的服务功能

Answer 3

我的主要问题是服务的变化似乎并不持久。我后来才知道服务WAS持久但控制器没有更新。

所以我做了以下更改：

在navcon中我添加了一块手表
在变量初始化后移动了一些线来注册手表

然后，我从服务

调用了changePage方法

this.page = "login";
$scope.$watch(function(){ return navigationService.page;}, function(){
    console.log("service changed");
    conNav.page = navigationService.page;
    })

navigationService.changePage("login");

然后（我不知道为什么）我必须将ng-show指令更改为ng-if。

现在导航工作正常。

感谢大家的帮助

存储在角度服务上的数据似乎不具有持久性

3 个答案: