javascript - ng-show 不更新 DOM 元素

Question

我正在尝试动态切换 ng-show 值。

我有一个 Controller ，有两种方法，一种显示，一种隐藏:

var HeaderCtrl = this;

HeaderCtrl.HelpButtonVisible = "false";

HeaderCtrl.HideHelpButton = function() {

    HeaderCtrl.HelpButtonVisible = "false";
}

HeaderCtrl.ShowHelpButton = function() {

    HeaderCtrl.HelpButtonVisible = "true";  
}

这是开始时隐藏的按钮。它还用于调用将隐藏自身的方法:

<button id="help-button" ng-show="{{HelpButtonVisible}}" class="button button-stable icon-left ion-information-circled" 
     ui-sref="login" ng-click="HeaderCtrl.HideHelpButton()">Help</button>

这是带有应该显示的方法的按钮:

<button id="login-button" class="col button button-positive button-small" ng-click="HeaderCtrl.ShowHelpButton()" ui-sref="main">Log in</button>

当我点击上面的按钮时，ng-show 更新为 true，但是帮助按钮没有显示。

为什么？我尝试了一切，$scope.$apply , $scope.$digest ，尝试在没有 {{ }} 的情况下调用对象，没有任何效果。

编辑:

完全 Controller :

angular.module('app.controllers', [])

.controller("HeaderCtrl", function( ) {

    var HeaderCtrl = this;

    HeaderCtrl.HelpButtonVisible = false;

    HeaderCtrl.HideHelpButton = function() {

        HeaderCtrl.HelpButtonVisible = false;
    }

    HeaderCtrl.ShowHelpButton = function() {

        HeaderCtrl.HelpButtonVisible = true;    
    }
})

Answer 1

你所拥有的不是惯用的 Angular 。使用 Angular 时，遵守约定非常重要。任何连接到 DOM 的东西都应该附加到 $scope 对象:

angular.module('app.controllers', [])
.controller("HeaderCtrl", function($scope) {
  $scope.HelpButtonVisible = false;
  $scope.HideHelpButton = function() {
    $scope.HelpButtonVisible = false;
  }
  $scope.ShowHelpButton = function() {
    $scope.HelpButtonVisible = true;    
  }
});

查看:

<button id="help-button"
        ng-show="HelpButtonVisible"
        class="button button-stable icon-left ion-information-circled" 
        ui-sref="login" 
        ng-click="HideHelpButton()">Help</button>