将angularjs数据传递到引导模态

Question

首先，我是angularjs的新手。因此，当我尝试将数据从angularjs控制器传递到引导程序模式时，它们不会显示。

触发

<a ng-click="editarEndereco(item)" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#exampleModalLong">Editar</a> 

语气

<div  class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document" >
        <div class="modal-content" ng-controller="listaEnderecosController">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLongTitle">Alterar informações deste endereço</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {{enderecoAlterar.bairro}} 
            <div class="modal-body" >

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>  

AngularJS控制器

$scope.enderecoAlterar = {};

$scope.editarEndereco = function (item) {
    $scope.enderecoAlterar = item;
};

Answer 1

通过此实现，您将无法将参数传递给模态。

首先，您应该使用内部内容将id="exampleModalLong" div分隔到新的html文件中。

然后如下编辑此<a>标记，

<a ng-click="editarEndereco(item)" class="btn btn-primary btn-xs">Editar</a> 

在您的控制器内部，按如下所示编辑editarEndereco函数，

$scope.editarEndereco = function (item) {

    var modalInstance = $modal.open({
    controller: 'CREATE A NEW CONTROLLER FOR THE MODAL AS WELL. IF YOU ALREADY HAVE IT. MENTION IT HERE',
    templateUrl: 'YOUR NEWLY CREATED HTML FILE URL HERE',
    resolve: {
      enderecoAlterar : item
    }
  });

};

然后里面modalinstance控制器注入enderecoAlterar及使用

Answer 2

我正在使用angular.copy（item，$ scope.item）; 功能。 这就是我在代码中完成的方式：

 $scope.confirmDelete = function (item) { $scope.item = {}; angular.copy(item, $scope.item); $('#delete-item-modal').modal({ show: true }); } 

 <a role="button" ng-click="confirmDelete(offer)">Delete</a> <!-- Confirm delete modal --> <div class="modal fade" id="delete-item-modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Delete element</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-16"> Are you sure you want to delete <strong>{{item.offerTitle}}</strong>? </div> </div> </div> <div class="modal-footer"> <form novalidate name="deleteOfferForm" ng-submit="deleteOffer(item)"> <input type="hidden" class="form-control" id="{{appData.securityTokenName}}" value="{{appData.securityToken}}"> <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-xs btn-danger">Delete</button> </form> </div> </div><!-- /.modal-content --> </div> </div>