Question

我有angularjs申请和<span>。我尝试用ng-hide指令隐藏它，但是：

<span ng-hide="hideSpan">

和

// controller code here
....
$scope.hideSpan = true;
....

无效，无视。如果我做：

// controller code here
....
$scope.$apply(function(){$scope.hideSpan = true});
....

我收到错误：$apply已在进行中。

如何以这种方式正确使用ng-hide/ng-show？

谢谢。

Answer 1

您应该能够像显示一样直接控制控制器中的隐藏/显示功能。以下是使用按钮触发切换隐藏节目的工作示例。

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="mycontroller">
    <span ng-hide="hideSpan">Some Content to hide</span>
    <button ng-click="toggleHide()"/>Toggle Hide</button>
  </body>

</html>

脚本。

angular.module('myapp', []).controller('mycontroller', function($scope){
  $scope.hideSpan = true;

  $scope.toggleHide = function(){
    if($scope.hideSpan === true){
      $scope.hideSpan = false;
    }
    else{
      $scope.hideSpan = true;
    }
  }

  });

我创建了一个简单的plunker，以便在http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview显示这一点。

至于为什么$ apply导致错误，这是可以预期的，因为直接作用域（由$ scopeProvider提供）变量操作已经在监视更改并包含在核心角度的默认应用中，因此任何更改将自动应用于该变量的其他绑定。

Answer 2

你可以在ng-click中更改hideSpan值，保存几行。欢呼声

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="mycontroller">
    <span ng-hide="hideSpan">Some Content to hide</span>
    <button ng-click="hideSpan=!hideSpan"/>Toggle Hide</button>
  </body>

在Angular.JS中正在申请中

2 个答案: