2014-11-04 23 views
18

Próbuję przekazać niektóre dane modelu do okna modalnego po jego otwarciu. Kiedy użytkownik kliknie na element, chcę otworzyć okno modalne i wyświetlić bardziej szczegółowe informacje dotyczące tego, co zostało kliknięte.Angular-ui modal - przekazywanie danych do modalnego

Utworzono plunker, który działa tak, jak chcę, z wyjątkiem przekazywania danych do okna modalnego.

Próbuję przekazać dane w użyciu ng kliknij:

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

Czy ktoś może mi pomóc z tym? lub wskazać mi właściwy kierunek?

Odpowiedz

29

Jak o this?

I dodaje element do zdecydowania

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

A w controller robie: $scope.item = item; po wstrzyknięciu item

13

Zrobiłem plunarza dla ciebie na http://plnkr.co/FzU5SOv3pdZmAPAIOzdo.

Chcesz rozwiązać swoje dane tak, jak robisz obecnie.

$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; 
    } 
    } 
}); 

iw swoim modalnej kontroler upewnij się, że obejmują obecnie rozwiązany Rozmiar obiektu w następujący sposób:

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

co pracował dla mnie było stworzenie obiektu w ciągu resolve zwracającej obiekt zawiera zmienne, które chciałem udostępnić.

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

Aby uzyskać dostęp do obiektu shared, to kiedy definiowania modalne kontroler instancji.

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