Javascript ng显示不更新DOM元素

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

我有一个控制器，有两种方法，一种显示，一种隐藏：

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>

---

尝试将此应用于$scope

var app = angular.module('ido.controllers', []);

app.controller("HeaderCtrl", function($scope) {

    angular.extend($scope, {
        HelpButtonVisible: false,
        HideHelpButton: function() {
            $scope.HelpButtonVisible = false;
        },
        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>

var-app=angular.module（'ido.controllers'，[]）；
应用控制器（“HeaderCtrl”，功能（$范围）{
角度。扩大范围{
HelpButtonVisible:false，
HideHelpButton:function（）{
$scope.HelpButtonVisible=false；
},
ShowHelpButton:函数（）{
$scope.HelpButtonVisible=true；
}
});
})
帮助

始终将事件和值附加到$scope。您只能访问$scope

---

使用作用域时，永远不需要使用。$digest（）或。$apply（）。只有当您突破$scope时。

您拥有的不是惯用的角度。使用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;    
  }
});

视图：

帮助

您需要使用ng模型，也不能绑定到这样的原语。
控制器：

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;    
    }
})

this.HelperObj = {"ArrofHelperObjs":[/*YOUR OBJECTS HERE*/]};
this.ToggleHelpButton = function(obj){ 
     var package = this.HelperObj.ArrofHelperObjs.length;
     var handl = this.HelperObj.ArrofHelperObjs; 
     if(package == 0){
       handl.push(obj);
       return 200;
     }
     for(var x=0;x<package;x++){
        if(handl[x] == obj){
          handl.splice(x, 1);
          return 200;    
        }
        if(x == package-1){
          handl.push(obj);
          return 200;      
        }
     }
     console.log("Error: handl= "+handl);    
     console.log("Error: obj= "+obj);
     return "Error: Conditions were supposed to have been met";
     };

这在某些情况下是可行的，但大多数情况下，您将拥有多个对象。看起来像这样

    this. package = {"ArrayofObjects":[]};

在这些括号内[]是所有对象。像这样

    this. package = {"ArrayofObjects":[{"selected":"false","html":"tagone"},{"selected":"false","html":"tagtwo"}, {"selected":"false","html":"thirdtag"}   ]};

一旦你像这样设置好了，做一个函数来改变这些值中的任何一个。这就是我的ToggleHelpButton方法所做的。我正在更改该元素的选定属性的值。然后在html中，使用

<toggledelement ng-model="ctrl.package.ArrayofObjects[x].someproperty">  

x是对象数组的索引。
已选择someproperty。

---

现在您有了一个绑定到truthy或falsy值的元素。玩得开心

这些属性和函数应该在视图中可访问的

$scope

对象上，但其工作原理是这样的，

ng show

更新为

false

和

true

，但是，该类不是。。。如果我尝试使用

visible

和

hidden

，它适用于

style=“visibility:{{{HeaderCtrl.HelpButtonVisible}}”

，但是，这显然不是最优的。我确实尝试使用$scope，但没有效果。发布您的完整controlleruse文本

false

和

true

，而不是strings@Brennan完成。正如你所看到的，变化不大。嗯，它终于起作用了。。。我做的和你做的完全一样，只是我必须从ngs显示值中取引号和括号。我以前试过，但没有试着去掉括号，还有引号。。。好好想想。好吧，谢谢。哦，如果你能编辑

ng show

部分，那就太好了。谢谢

    this. package = {"ArrayofObjects":[]};

    this. package = {"ArrayofObjects":[{"selected":"false","html":"tagone"},{"selected":"false","html":"tagtwo"}, {"selected":"false","html":"thirdtag"}   ]};

<toggledelement ng-model="ctrl.package.ArrayofObjects[x].someproperty">