Angularjs - 使用 ng-show 处理两个不同的链接时页面变为空白答案

【问题标题】：Angularjs - Page goes Blank when working with ng-show for two different linksAngularjs - 使用 ng-show 处理两个不同的链接时页面变为空白
【发布时间】：2017-01-22 15:00:56
【问题描述】：

Link1：个人资料

Link2：更新

查看：common.html

这两个链接是 home.html 的一部分

因此，在我的应用程序中，配置文件和更新都将重定向到 common.html。在 ng-show 的帮助下，我会在点击链接时显示某些部分。

这是一个 mycode 的例子。在实际场景中，视图存放在 view/common.html 中的不同路径

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.get = function(d) {
        if (d == 1) {
            $scope.pro = true;
            $scope.set = false;
        } else if (d == 2) {
            $scope.set = true;
            $scope.pro = false;

        }
    }

});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

    <div ng-click="get(1)">Profile</div>
    <div ng-click="get(2)">Setting</div>

    <div ng-show="pro"> This is my profile </div>
    <div ng-show="set"> This is my settting </div>



</body>

</html>

问题：当我刷新页面时，页面变为空白。

我想要的是，如果我单击任一链接然后刷新，它应该会显示我所在的相应页面。我尝试通过 localstorage 来实现这一点，方法是在 localstorage 中为两个链接设置唯一 ID。

但我不知道如何实现这一点。请帮帮我。

【问题讨论】：

将pro 或set 设置为控制器中的默认页面。 $scope.pro=true; $scope.set = false;
它是解决方案之一。但是，如果我想显示当前用户所在的特定页面，那么解决方案是什么？ @hadiJz
当你重新加载页面时，scope.set和scope.pro是未定义的！！所以这是完全正常的，因为角度 ng-show 条件不正确！！
你真正想做什么？？你想实现什么默认行为？
默认情况下是否应该显示我访问的页面。如果我在设置页面上，那么它应该在 reloaf 之后显示设置页面，并且与配置文件一相同。我认为我们可以使用本地存储来实现它，但是我怎么不明白。 @Sphinx117

标签： angularjs local-storage ng-show

【解决方案1】：

您的控制器只包含一个get 函数而没有其他任何功能，因此当控制器运行时，pro 和set 的值都是undefined。

由于在 JavaScript 中 undefined 具有虚假值，ng-show 隐藏两个页面。您必须通过在控制器中将该值设置为 true 来设置要显示的默认页面：

(function() {
    angular.module("myApp", [])
        .controller("myCtrl", function($scope) {

            // set default values
            $scope.pro = true;
            $scope.set = false;

            $scope.get = function(d) {
                if (d == 1) {
                    $scope.pro = true;
                    $scope.set = false;
                } else if (d == 2) {
                    $scope.set = true;
                    $scope.pro = false;

                }
            };

        });
})();

【讨论】：

@Mohammed 我在您的控制器中添加了更多内容。首先，有一个 IIFE（请仔细阅读）并且我已经删除了 app 变量（当您可以使用 getter 轻松获取您的应用程序时，实际上不需要另一个全局变量在您的应用程序中浮动）。第三，只需阅读 ngRoute 或 ui.router Angular 模块并使用其中之一：它们比您现在所做的要强大得多。
我们不能使用 localstorage 来设置页面而不是默认页面，如果是，请帮助我。 @cst1992
没有。我会告诉你的，一旦我做到了。 @cst1992

【解决方案2】：

在您的 get 函数中，在本地存储中注册 set 和 pro 的值。

在您的控制器中使用会话存储初始化您的变量（如果已定义）。就是这样。

也许你应该使用 $locationChangeStart 在 URL 更改之前广播。

因此，在 url 更改之前，将当前选项卡保存在会话存储中。去谷歌上查询！

【讨论】：