正在Angular.JS中申请

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

  });

我已经在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>