Wie kann ich Daten in AngularJS modal laden?

Question

Ich habe ein paar Fragen:

1. Wie kann ich in Winkel modal lade Daten zum Inhalt?
2. Wie kann ich benutzerdefinierte Daten für einen ausgewählten Artikel laden? ................................................. ............

Dies ist mein Code:

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

bei der Suche Richtlinien documentation, Sie werden sehen, dass sie ca n einen isolierten Umfang haben, mit der sintax:

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

Mit ihm können Sie eine Eigenschaft in Ihrem Tag wie einfügen:

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

Die Einzelteile werden dann in den Anwendungsbereich der Richtlinie injiziert werden .

Answer 2

können Sie diese einfachste Arbeits Code versuchen (kann auch Daten von api laden)

HTML-Code:

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

Innen-Controller-Code sein wird:

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

HTML Bootstrap Modell Code :

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