Question

您好我使用了跟随Modalpopup的bootstrap现在在控制器端使用Angular我在$scope.tags变量中获取数据。在这里，我想使用ng-repeat="vendor in tags"在网页上绑定数据。

.HTML

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Tags To Image</h4>
  </div>
  <div class="modal-body">
      <div style="padding: 20px;" ng-repeat="vendor in tags">
          <div class="col-md-4">
            <select
              data-placeholder="Select Type"
              class="form-control"
              chosen
              ng-model="vendor.type"
              ng-options="item for item in vendorTypes">
            </select> 
          </div>
          <div class="col-md-4">
            <select
              data-placeholder="Select Vendor"
              class="form-control"
              chosen
              ng-model="vendor.vendor"
              ng-options="item.id as item.business.name for item in vendors">
            </select> 
          </div>
          <div class="col-md-4">
            <a class="btn btn-primary" ng-click="item.vendors.splice(item.vendors.indexOf(vendor), 1)"> - </a>
          </div>
        <!-- </div> -->
      </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

单击按钮时，我会收到模态弹出事件。

    $('#myModal').on('show.bs.modal', function(e) {
      indaaix = $(e.relatedTarget).context.value;

      $scope.tags = $scope.tags = [{
           type: "Event planner",
           vendor: "cus_7VTYxJ64KZ6Iaz"
         }];
        console.log($scope.tags);
      }
    });

请尽量帮助我，数据不在网页上绑定。我在哪里错了请留下评论或回答所以我可以测试它。感谢。

Answer 1

jQuery事件处理程序不会触发角度范围摘要，因此angular不会知道该处理程序中的更改，您应该在事件处理程序中明确触发范围摘要：

 $('#myModal').on('show.bs.modal', function(e) {
     $timeout(function(){
         indaaix = $(e.relatedTarget).context.value;

         $scope.tags = $scope.tags = [{
           type: "Event planner",
           vendor: "cus_7VTYxJ64KZ6Iaz"
         }];
     })

 });

$timeout服务会在内部调用scope.$digest

Bootstrap模式使用Angular not Binding绑定数据

1 个答案: