Angularjs 如何从不同视图的控制器更改视图中的文本

Question

我遗漏了一些非常基本的东西....

我在 angularJS 中创建了三个视图：一个 header、一个 body 和一个页脚。我想在成功登录后将 header 中的文本从登录更改为注销，在用户注销时也从注销更改为登录。

我的files/code:

index.php:

    <div ui-view="header"></div>
    <div ui-view="main"></div>
    <div ui-view="footer"></div>

header.page.html（我想我想要 ng-bind 或 {{some var}} ）

    <li><a href="#login" >Login</a></li>

login.component.js（不确定如何获取 header.page.html 的值）

    login(){
        var user = {
            company: this.company,
            username: this.username,
            password: this.password
        };
        var me = this;
        this.$auth
            .login(user)
            .then(function (response) {
                me.$auth.setToken(response.data);


// CHANGE LOGIN TO LOGOUT IN HEADER



                me.$state.go('app.dashboard');
            })
            .catch(function (response) {
                console.log("error response", response);
            })
    };

以及注销功能（不确定如何获取 header.page.html 的值）

function dashboardController($state, $scope, $auth){
$scope.isAuthenticated = function () {
    return $auth.isAuthenticated();
};
document.title = "Dashboard";
$scope.logout = function () {
    $auth.logout();

    //change Logout To Login text in header

    $state.go('app.home');
};

}

Answer 1

您可以使用 $broadcast、$emit 和 $on。更多详情见：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

其他解决方案是使用 $rootScope，但要小心污染它。

对于一些应用相关的信息，比如用户信息，老实说，基于$rootScope的解决方案也不是完全错误的。

您绝对应该避免使用 $rootScope 获取特定于功能的信息。

我会研究更多关于使用广播来做决定。

Answer 2

如果您只想更改 header 表单登录中的文本，您可以访问您的

<li><a id="login" href="#login" >Login</a></li>

这样：document.getElementById("login") 并设置新文本，或者您可以使用服务。您应该登录并 header 控制器的服务。

Angularjs 如何从不同视图的控制器更改视图中的文本

Angularjs how to change text in a view from a different view's controller

angularjs

angularjs-view