0

我有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以这种方式正确使用？

谢谢你。

4

2 回答 2

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 提供）变量操作已经在观察变化并包装到核心角度的默认应用中，因此任何变化都将是自动应用于该变量的其他绑定。

于 2013-05-29T14:37:22.330 回答
0

您可以在 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>
于 2013-08-12T11:11:08.317 回答