代码之家 › 专栏 › 技术社区 › Mohammed

Angularjs-使用ng显示两个不同链接时,页面变为空白

ng-show local-storage angularjs

0

Mohammed · 技术社区 · 8 年前

链接1:个人资料

链接2:更新

查看: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。

但我不知道如何做到这一点。帮我做这个。

2 回复 | 直到 8 年前

1

cst1992 8 年前

您的控制器仅包含一个 get 函数而不是其他,因此当控制器运行时 pro 和 set 有价值 undefined .

因为在JavaScript中 未定义 具有虚假值,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;

                }
            };

        });
})();

2

0

Sphinx117 8 年前

在get函数中,将set和pro的值注册到本地存储器中。

在控制器中,使用会话存储初始化变量(如果已定义)。这就是全部。

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

因此,在url更改之前,请将当前选项卡保存在会话存储中。谷歌!