Bindungsinformationen in einem HTML-Element

Question

ich ein http.get haben, die ein Array von Anwendungen

<div id ="app" ng-repeat="app in applications" > 
<carddata-toggle="modal" data-target="#myModal" ></card> 
     </div> 

Für jeden von ihnen gibt, mache ich eigentlich eine Karte (kundenspezifische Richtlinie ... denken jetzt Karten google) und hinzufügen ein Bootstrap modal für sie. Die Idee ist, dass Sie dann auf jede Karte klicken und mehr Informationen über diese bestimmte App erhalten können.

Im Code für mein Modal möchte ich Informationen über die App abrufen (zum Beispiel den App-Namen). Da dies außerhalb der for-Schleife liegt, hat Angular den Namen meiner App verloren und gibt daher einen Fehler aus.

<div class="modal modal-fullscreen fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <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" id="myModalLabel">{{app.name}} Status</h4> 
     </div> 

ich durch den Winkel Api gelesen habe ... Ich war auf der Suche nach einem Weg, um die Modal den Namen der Anwendung zu „binden“, so dass es sich bewusst ist, aber kann nichts geeignet sehen. Ich bin neu bei Angular und ich komme daher wahrscheinlich nicht richtig an.

Wie würden Sie das angehen?

Answer 1

In Ihrer Ansicht

<div id ="app" ng-repeat="app in applications" > 
    <carddata-toggle="modal" data-target="#myModal" ng-click="setApp(app)"></card> 
</div> 


<h4 class="modal-title" id="myModalLabel">{{selectedApp.name}} Status</h4> 

In Ihrem Controller

$scope.setApp = function(appParam){ 
    $scope.selectedApp = appParam; 
} 

Answer 2

Ich würde vorschlagen, Angular UI modalen Service zu nutzen (habe einen Blick auf https://angular-ui.github.io/bootstrap/#/modal).

In Ihren Controller (wo Sie Ihr Array von applications laden), injizieren Sie $uibModal, z.

angular.module('myApp').controller('myCtrl', function ($scope, $uibModal) { 
    $scope.applications = []; 

    $scope.openModal = function(app) { 
    $uibModal.open({ 
     controller: 'ModalInstanceCtrl', 
     templateUrl: 'myModalContent.html', 
     resolve: { 
     app: function() { 
      return app; 
     } 
     } 
    }); 
    } 
}); 

Dann definieren Sie den Controller für das modale selbst.

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title" id="modal-title">{{ app.title }}</h3> 
    </div> 
    <div class="modal-body" id="modal-body"> 
     Modal body content 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 

Ich habe vermieden, die controllerAs Syntax wie Sie $scope in Ihrem Beispiel zu verwenden haben scheinen:

// This is the controller for the modal itself 
// `app` being passed through the resolve parameter in $uibModal.open() 

angular.module('myApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, app) { 
    $scope.app = app; 

    $scope.ok = function() { 
    $uibModalInstance.close(); 
    }; 

    $scope.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
    }; 
}); 

Sie können Ihre modal-Vorlage, indem sie die folgenden in Ihrer Ansicht definieren.