2014-11-04 6 views
18

Ich versuche einige Modelldaten in ein modales Fenster zu übergeben, wenn es geöffnet wird. Wenn der Benutzer auf ein Element klickt, möchte ich, dass das modale Fenster geöffnet wird, und detailliertere Informationen zu den angeklickten Elementen anzeigen.Angular-ui modal - Daten in modal übergeben

Ich habe eine plunker erstellt, die funktioniert, wie ich will, außer für die Übergabe der Daten in das modale Fenster.

Ich versuche, die Daten bei der Nutzung zu übergeben ng Klick:

<img ng-src="{{item.picture}}" width="100" ng-click="open(item)"/> 

jemand mir mit diesem helfen? oder mich in die richtige Richtung weisen?

Antwort

29

Wie wäre es this?

Ich habe den Artikel der Entschlossenheit

resolve: { 
    items: function() { 
     return $scope.items; 
    }, 
    item: function(){ 
     return size; 
    } 
} 

Und in der controller ich tue: $scope.item = item; nach dem item

13

Ich habe bei http://plnkr.co/FzU5SOv3pdZmAPAIOzdo einen Plunder für Sie gemacht.

Sie möchten Ihre Daten so auflösen, wie Sie es gerade tun.

$scope.open = function (size) { 

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    resolve: { 
    items: function() { 
     return $scope.items; 
    }, 
    size: function() { 
     console.log('size: ', size); 
     return size; 
    } 
    } 
}); 

und in Ihrem modalen Controller stellen Sie sicher, die jetzt aufgelöst Größe Objekt umfassen wie folgt:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, size) { 

    $scope.items = items; 
    $scope.selected = { 
    item: $scope.items[0] 
    }; 
    $scope.size = size; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected.item); 
    }; 

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

Injektion Was für mich gearbeitet wurde ein Objekt innerhalb resolve zu erstellen, die ein Objekt zurückgibt das enthält die Variablen, die ich teilen wollte.

resolve: { 
    shared: function(){ 
    return { 
     name: 'Spencer', 
     numbers: [1, 2, 3] 
    } 
    } 
} 

Um das shared Objekt zuzugreifen, ist es, wenn Ihre Modalinstanz Controller definieren.

app.controller('ModalInstanceController', function($scope, shared, $uibModalInstance,