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