AngularJS 视图未使用 ng-show 和 $routeChangeSuccess 更新答案

【问题标题】：AngularJS view not updating with ng-show and $routeChangeSuccessAngularJS 视图未使用 ng-show 和 $routeChangeSuccess 更新
【发布时间】：2015-12-07 20:34:53
【问题描述】：

我的应用程序有一个主控制器，它现在只负责显示和隐藏站点标题。但是，当我导航回主页（通过主页链接或后退按钮）时，它不会再次显示。我已调试并验证范围变量设置为 true，但视图未反映这一点。

以下是相关代码：

(index.html)

...
<body ng-app="mainApp" ng-controller="MainController">

<div class="container">
    <div class="top-header" ng-show='showHeader'>
...

(MainController.js)

app.controller('MainController', function($scope, $location) {

init();
$scope.click = function() {
  init();
} 

function init() {
    $scope.showHeader = false;
    if ($location.path() === "/") 
        $scope.showHeader = true;
}

$scope.$on('$routeChangeSuccess', function(next, current) { 
    init();
});

});

我确信这是我所缺少的一些微不足道的东西，因为我是 AngularJS 的新手，但任何帮助将不胜感激。

【问题讨论】：

你的$scope.click函数是用来做什么的？它将 $scope.showHeader 设置为 false，这可能会导致您的问题。
你试过ng-if而不是ng-show吗？
$routeChangeSuccess 回调的签名是否正确？ Here 它说应该首先出现 event 参数。
$scope.click 以前用于某些事情。我的意思是删除它。但这并没有引起问题。我在调试的时候已经验证过了，刚刚删除了。
@Aldo 据我所知，不需要事件参数。它不会导致任何错误，添加它不会改变任何东西。

标签： angularjs ng-show

【解决方案1】：

我建议使用ui-router

在那里你可以确定某个状态是否处于活动状态（$state.include）

但对我来说，代码似乎是有效的。在init函数中调试位置路径，你可以看到发生了什么

并且要小心绑定原语（showHeader）！像 ng-if 这样的指令创建了一个额外的范围，所以仔细检查 ng-show 周围是否没有 ng-if

【讨论】：

此时我试图避免使用 ui-router，但我想我可能不如应用程序变得更复杂。我确实验证了在单击主页并通过浏览器后退按钮时调用了 init 函数，并且 showHeader 被设置为 true。将 ng-show 更改为 ng-if 解决了该问题。谢谢。
Anditthas 在这里可能有一点。尝试将原语 showHeader 更改为对象，例如 showHeader = {status: true}，并改为操作状态，例如$scope.showHeader.status = false;.
@Aldo 我只是尝试将其设为一个对象，并验证了在调试时将 status 属性设置为 true，但使用 ng-show 无法正常工作。
请在 init 函数中使用 console.log($path.location()) .. 但奇怪的是它与 ng-if 一起工作
@Anditthas 它在主页上记录“/”，在切换视图时更改（到“/register”等），并在按预期返回主页时返回“/”。我现在将标志切换回原语，但我再次验证它不能使用 ng-show 并且只能使用 ng-if（无论我使用的是对象还是原语）。

【解决方案2】：

您是说当您浏览回路径时很可能不是'/'。我希望它后面包含一些名称。

更改此代码：

if ($location.path() === "/") 
        $scope.showHeader = true;

至此：

if ($location.path() === "/" || $location.path() === "/<name>") 
        $scope.showHeader = true;

【讨论】：

这不起作用。我在调试时也验证了 $location.path() == "/" 。