javascript - 通过 Controller 控制 Angular ng-show

Question

如何使用 ng-show 显示元素，我可以使用 bool 值通过 Controller 控制该元素？(除了这个按钮之外， Controller 中的所有内容都工作正常)

这是我的模态 html。

<div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
    <div class="modal-container modal-confirm-pickup-container">
      <div class="modal-container-content">
        <div class="modal-container-content-header">
          <strong>
            Login
          </strong>
        </div>
        <div class="modal-container-content-body">
          aaaaaaaeoa
        </div>
      </div>
    </div>
  </div>

这是我在 Controller 中的代码

.controller('venderConsole', ['$scope','$http', function      ($scope,$http) {

$scope.showPickupModal = false;

$('.close-modal-box-bt').click(function(event) {
/* Act on the event */
$('.modal-box-login').css('display','none');
$.ajax({
    url: 'json/multipleOrder.json',  //Server script to process data
    type: 'get',
    beforeSend: function(xhr){

    },
    success: function(data){
      $scope.orders = data.data

      // $scope.ordersList = $scope.orders[0].products;

      // console.log(orderSize);
      $scope.getTotal = function(order){
          var total = 0;
          for(var i = 0; i < order.products.length; i++){
              var subtotal = order.products[i].subtotal;
              total += subtotal;
          }
          return total;
      }

      $scope.$apply();

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest);
        alert(textStatus);
        }
    });
  });
}]);

这是我的按钮 html。

<table id="front-table" class="table table-bordered" ng-show="!vendorPageToggle">
        <thead>
          <tr class="table-head-text-center">
            <th></th>
            <th>Order</th>
            <th>&#3647; Total</th>
            <th>Address</th>
            <th>Comment</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="order in orders">
            <th class="text-center">
              <span class="table-order-number">
                <strong>{{ order.id }}</strong>
              </span>
              <br>
              <span>{{ order.customer.name }}</span>
              <br>
              <br>
              <span>{{ order.estimated_pickup }}</span>
            </th>
            <td>
              <span ng-repeat="product in order.products">
                1 X {{ product.name }} <br>
                <span ng-repeat="extra in product.extras">
                  <span ng-repeat="item in extra.items">
                    -- ext {{ item }}
                    <br>
                  </span>
                </span>

                <br>
              </span>
            </td>
            <td>{{ getTotal(order) }}</td>
            <td>
              {{ order.customer.address.address1 }}
              <br>
              {{ order.customer.address.address2 }}
              <br>
              {{ order.customer.address.suburb }}
              <br>
              {{ order.customer.address.city }}
              <br>
              <br>
              <strong>
                <i class="icon ion-iphone" style="font-size: 24px;"></i> {{ order.customer.phone }}
              </strong>
            </td>
            <td>aaaa</td>
            <td class="text-center">
              <button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
                button-balanced
              </button>
            </td>
          </tr>
        </tbody>
      </table>

我的CSS

.modal-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    /*display: none;*/
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-container {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal-container-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 20px;
    outline: 0;
    overflow: hidden;
}

.modal-container-content-header {
    background-color: #FF0000;
    color: #fff;
    text-align: center;
    font-size: 32px;
    height: 80px;
    padding-top: 28px;
}
.modal-container-content-body {
    padding: 15px;
    background-color: #EEEEEE;
}

但是当我单击按钮时什么也没发生，我的模式仍然与开始时不一样。

我该如何解决这个问题。谢谢!

Answer 1

这是您按预期工作的代码:JS Fiddle

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
var app = angular.module('app', []);

app.controller('ctrl', function ($scope) {
    $scope.hello = 'Ohh, hello there!';
    $scope.showPickupModal = false;
});
</script>

<div ng-app='app' ng-controller='ctrl'>

  <button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
    button-balanced
  </button>


  <div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
    <div class="modal-container modal-confirm-pickup-container">
        <div class="modal-container-content">
            <div class="modal-container-content-header"> <strong>
            Login
          </strong>

            </div>
            <div class="modal-container-content-body">{{hello}}</div>
        </div>
    </div>
  </div>

</div>

如果这不能解决您的问题，请发布更多代码，以便我们了解您的 Controller 无法正常工作的问题所在。

使用新的完整代码进行编辑

Working Plunker

好吧，我不知道为什么你的代码不起作用。但是，只是为了测试一下，我喜欢不在 View 上做任何事情。所以，我删除了 html 上的代码并通过函数进行交换。像这样:

ng-click='showPickupModal = !showPickupModal'

这已被删除:

ng-click='togglePickupModal()'

并且，在 Controller 上，我添加了此功能，并且在进行任何 console.log 测试之前，它就起作用了。

$scope.togglePickupModal = function () {
  $scope.showPickupModal = !$scope.showPickupModal;
};

您尚未显示“.close-modal-box-bt”的代码，因此我也使用切换功能来关闭模式。问题解决了。