javascript - Bootstrap 模式使用 Angular 绑定(bind)数据而不是绑定(bind)

Question

嗨，我使用了 bootstrap 的 Modalpopup 现在，在 Controller 端使用 Angular，我在 $scope.tags 变量中获取数据。这里我想使用ng-repeat="vendor in Tags"在网页上绑定(bind)数据。

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

请尝试帮助我，数据未绑定(bind)在网页上。我哪里错了，请留下评论或答案，以便我可以测试它。谢谢。

Answer 1

jQuery 事件处理程序不会触发 Angular 范围消化，因此 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