Question

我有一个简单的Angular代码来显示和隐藏一个poppin，但每次我使用它时我都被阻止了。

在我的控制器中，我有这个来显示poppin：

   @Html.Partial("~/Views/InsurancePolicyItem/IndexPolicyCompanyRisk.cshtml", @InsurancePolicySession.InsuranceCompanyRisks)

这是为了隐藏它：

    $scope.showHidden = function() {
        console.log('in')
        $scope.showIt = true;
    };

在我的HTML中：

    $scope.hideIt = function() {
        console.log('out')
        $scope.showIt = false;
    };

如果我点击该项目会出现poppin，当我点击关闭btn时，我会看到＆＃39; out＆＃39;和＆＃39; in＆＃39;在我的日志中，poppin永远不会消失。

我确定这是一个愚蠢的错误，但我没有看到它。如果有人有想法..感谢提前！

Answer 1

点击event propagation时需要阻止hideIt：

<button class="btn" ng-click="hideIt();$event.stopPropagation();">Close</button>

这可能是重构：

function BeersCtrl($scope, beers) {
  $scope.beers = beers;
 
  $scope.showBeerList = true;
  
  $scope.toggleBeerList = function(event) {
    $scope.showBeerList = !$scope.showBeerList;  
  };
}


angular
  .module('test', [])
  .controller('BeersCtrl', BeersCtrl)
  .value('beers', [
    { name: 'Peroni' },
    { name: 'Guinnes' }
  ])
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
  <article ng-controller="BeersCtrl">
    
    <div>
      <button 
              ng-click="toggleBeerList($event)"
              type="button">Toggle Beer List</beer> 
    </div>
    
    <ul ng-show="showBeerList">
      <li 
          ng-repeat="beer in beers">
        
        <span ng-bind="beer.name"></span>
      </li>
      
    </ul>
    
  </article>
</section>

我没有退出Angularjs的功能

1 个答案: