Bootstrap模態使用Angular綁定數據不綁定

Question

嗨我使用遵循引導程序的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); 
     } 
    }); 

請儘量幫我，數據未對網頁進行綁定。我錯在哪裏請留下評論或回答，以便我可以測試它。謝謝。

Answer 1

jQuery的事件處理程序將不會觸發角範圍消化，所以角度不知道該處理程序的變化，你應該明確地觸發範圍在事件處理消化：

$('#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內部