index.html中的Angularjs双向绑定答案

【问题标题】：Angularjs two-way binding in index.htmlindex.html中的Angularjs双向绑定
【发布时间】：2018-07-27 06:12:47
【问题描述】：

我是 Angularjs 的新手。我正在尝试构建一个带有登录页面的简单系统，它会在成功登录后重定向到另一个页面。

我正在尝试使用 ng-view 显示 index.html 中的所有页面（包括登录页面）。我尝试使用 ng-if 来决定何时在页面顶部显示导航栏。

登录后vm.page的值不会改变

index.html

<html ng-app="myApp">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/custom.css" rel="stylesheet"/>

    <script src="jquery/jquery-3.3.1.min.js"></script>
    <script src="node_module/angular/angular.js"></script>
    <script src="node_module/angular-route/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="controllers/login-controller.js"></script>
</head>
<body>
    <div ng-controller="LoginController as lg" >
        <div ng-if="lg.page != 'Login'" ng-include="'view/navigation-top.html'"></div>
    </div>

    <div ng-view></div>

</body>

login-controller.js

angular.module('myApp').controller("LoginController", LoginController);

function LoginController($http, $location, $scope) {
    var vm = this;
    vm.page = "Login";

    vm.login = function(){
        vm.page = "Main";
        $location.path('/')
    }
}

当 vm.page 启动并设置为“登录”时它正在工作，但当我将其设置为“主”时页面不会改变。

如果有人可以帮助我，谢谢：D

【问题讨论】：

您可能想研究使用 UI-Router。网络上有一些很好的教程。
Alex，谢谢你的建议，我解决了这个问题后会看看 UI-Router。 :D
您是手动更改 vm.page 的值还是通过按钮操作或类似的方式更改？
我通过按钮操作改变了vm.page的值，调用了vm.login

标签： javascript angularjs

【解决方案1】：

问题在于您的 Login-Function 中的 $location.path('/') 调用。这将导航到 /index.html 并重新初始化 LoginController。因此 vm.page 变量被重置为“登录”。

删除 location.path() 或创建一个保留页面/登录状态的服务。

【讨论】：

我已经注释掉了 $location.path("/") 但仍然得到相同的结果。 LoginController 仍在重新初始化