Question

我视图中的hmtl代码如下所示：

<div ng-show="show_alert_message" ng-bind-html="alert_message"
     class="alert-message-container"
     ng-click="show_alert_message=!show_alert_message"></div>

我首先在视图的控制器中显示div：

$scope.show_alert_message = true;

用户点击div关闭它会导致ng-click使show_message_alert为false。这很有效，隐藏了div。但是如果我试图通过再次在控制器中运行命令再次显示div，它不会显示：

$scope.show_alert_message = true;

似乎ng-click已经停止，可以再次显示div。

我做错了吗？控制器的范围$ scope.show_alert_message = true;应该与ng-click =＆＃34; show_alert_message = false＆＃34;的范围相同所以我不明白为什么第二个$ scope.show_alert_message = true;没有工作，而第一个工作。

Answer 1

我做了一个snipet，它正在按你的意愿工作。查看范围，了解运行$scope.show_alert_message = true;时使用的范围。我认为这是一个需要修复的地方。

＆＃13;

var $scope = {};

var myApp = angular.module('myApp', []);

myApp.controller('ngShowCtrl', ['$scope', function($scope){
  $scope.show_alert_message = true;
  $scope.alert_message = "I'm an alert message!"
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="ngShowCtrl">
  <div 
       ng-show="show_alert_message" 
       ng-bind="alert_message"
       class="alert-message-container"
       ng-click="show_alert_message=!show_alert_message"
  ></div>
  <button type="button" ng-click="show_alert_message=!show_alert_message">Show/Hide</button>
  
</div>

＆＃13;

Answer 2

使用ng-if="show_alert_message"和ng-click="toggle()" 和

$scope.toggle=function(){
  setTimeout(function(){
      $scope.show_alert_message=! $scope.show_alert_message;
      //$scope.$apply();
  },0);

}

在div的点击隐藏后，无法显示ng-show以显示div

2 个答案: