Question

首先，我对angularjs很新。所以，当我尝试将数据从angularjs控制器传递到bootstrap模式时，他们就不会显示。< / p>

触发

<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＆amp;用它

Answer 2

我使用 angular.copy（item，$ scope.item）; 函数来完成它。这就是我在我的代码中完成它的方式：

＆＃13;

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

＆＃13;

<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>

＆＃13;

将angularjs数据传递给bootstrap模式

2 个答案: