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

  });

http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=previewでこれを実際に表示するための単純なプランカーを作成しました。

$apply がエラーを引き起こしている理由については、($scopeProvider によって提供される) 直接スコープの変数操作が既に変更を監視しており、コア angular のデフォルトの適用にラップされているため、これは予期されることです。その変数の他のバインディングに自動的に適用されます。

于 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 に答える