ng-show 不更新 DOM 元素

ng-show not updating DOM element

本文关键字：元素 DOM 更新 ng-show      更新时间：2023-09-26

>我正在尝试动态切换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>

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

<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，尝试在没有{{ }}的情况下调用对象，没有任何效果。

编辑：

全控制器：

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

你拥有的不是惯用的棱角。在使用角度时，遵守惯例很重要。连接到 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>

你需要使用ng-model，你也不能绑定到这样的原语。
控制器：

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

然后是 HTML 

<div ng-repeat="x in myctrl.HelperObj.ArrofHelperObjs" >
<button ng-model="x.selected" ng-click="myctrl.ToggleHelpButton(x.html); x.selected = !x.selected" ng-show="x.selected">
 {{x.html}}
</label>
</div>

有两点需要指出。 ng-model 是绑定到数据的方式。 使用 ng-model 时，不要绑定到基元。 我花了一段时间才把它记在脑海里。在共享的示例中，我的对象具有选定的属性和 html。即。

 this. package = {"selected":"false","html":"tagone"};

这在某些情况下会起作用，但大多数情况下您将拥有多个对象。看起来像这样。

    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 是对象数组的索引。
某些属性是文字选择的。现在，您有一个绑定到真值或假值的元素。 玩得愉快！

尝试将其应用于$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>

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

使用作用域时，永远不需要使用 .$digest（） 或 .$apply（）。只有当你冲出$scope时。

相关文章：