Come posso caricare i dati su modale AngularJS?

Question

Ho alcune domande:

1. Come posso caricare i dati a contenuti in modal angolare?
2. Come posso caricare dati personalizzati per qualsiasi articolo selezionato? ................................................. ............

Questo è il mio codice:

HTML

<section ng-controller="ServicesController"> 
<div ng-click="toggleModal()" ng-repeat="item in items" class="col-md-4"> 
     {{ item.name }} 
</div> 
    <modal visible="showModal"> 

    </modal> 
</section> 

CONTROLLER.JS

myApp.controller('ServicesController', function ($scope) { 

$scope.items = [ 
     { 
      "name": "product1", 
      "image": "images/img1.jpg", 
      "id": "1" 
     }, 
     { 
      "name": "product2", 
      "image": "images/img2.jpg", 
      "id": "2" 
     }, 
     { 
      "name": "product3", 
      "image": "images/img3.jpg", 
      "id": "3" 
     }, 
    ] 
     $scope.showModal = false; 
     $scope.toggleModal = function(){ 
     $scope.showModal = !$scope.showModal; 
}; 
}); 

myApp.directive('modal', function() { 
    return { 
    template: '<div class="modal fade">' + 
     '<div class="modal-dialog">' + 
     '<div class="modal-content">' + 
      '<div class="modal-header">' + 
      '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
      '<h4 class="modal-title">{{ title }}</h4>' + 
      '</div>' + 
      '<div class="modal-body" ng-transclude></div>' + 
     '</div>' + 
     '</div>' + 
    '</div>', 
    restrict: 'E', 
    transclude: true, 
    replace:true, 
    scope:true, 
    link: function postLink(scope, element, attrs) { 
    scope.title = attrs.title; 


    scope.$watch(attrs.visible, function(value){ 
     if(value == true) 
     $(element).modal('show'); 
     else 
     $(element).modal('hide'); 
    }); 
    } 
    }; 
}); 

Answer 1

Guardando la Direttive documentation, vedrete che ca n hanno un ambito isolato, utilizzando la sintassi:

return { 
    restrict: 'E', 
    scope: { 
     items: '=' 
    }, 
    ... 
}; 

Con esso, è possibile inserire una proprietà nel tag come:

<my-directive items="items" ></my-directive> 

Le voci, saranno poi iniettate nel campo di applicazione della direttiva .

Answer 2

si può provare questo codice di lavoro più semplice (possibile caricare i dati via api anche)

CODICE

HTML:

<button type='button' class='btn btn-primary btn-sm btnmargin' 
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)' 
>more info</button> 

codice

All'interno del controller sarà: Codice

$scope.customerinfo=[]; 
$scope.moreinfo= function(customer){ 
      $scope.customerinfo= customer; 
}; 

HTML Bootstrap Modello :

<!-- Modal start --> 
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'> 
     <div class='modal-dialog modal-lg' role='document'> 
      <div class='modal-content'> 
       <div class='modal-header'> 
        <button type='button' class='close' data-dismiss='modal'> 
         <span aria-hidden='true'>&times;</span> 
         <span class='sr-only'>Close</span></button> 
         <h4 class='modal-title text-danger' 
         id='myModalLabel'>customer info</h4> 
       </div> 
       <div class='modal-body'> 
        {{customerinfo.firstName}} 
       </div> 
      <div class='modal-footer'> 
       <button type='button' class='btn btn-default' 
      data-dismiss='modal'>close</button> 
      </div> 
     </div> 
    </div> 
    </div> 
    <!-- Modal end -->