使用Angular not Binding引导模式绑定数据

Bootstrap modal Bind Data using Angular not Binding

本文关键字：模式 绑定 数据 Angular not Binding 使用      更新时间：2023-09-26

嗨，我使用引导的Modalpopup现在在控制器端使用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);
      }
    });

请尝试帮助我，数据不绑定在网页上。我哪里错了，请留言或回答，这样我就可以测试了。谢谢。

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

相关文章：