2014-11-04 6 views
18

Я пытаюсь передать некоторые данные модели в модальное окно, когда оно открыто. Когда пользователь нажимает на элемент, я хочу открыть модальное окно и отобразить более подробную информацию о том, что было нажато.Angular-ui modal - передавать данные в модальные

Я создал plunker, который работает так, как я хочу, за исключением передачи данных в модальное окно.

Я пытаюсь передать данные в использовании нг нажмите:

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

Может кто-нибудь помочь мне с этим? или указать мне в правильном направлении?

ответ

29

Как насчет this?

Я добавил элемент в решимостью

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

И в controller я делаю: $scope.item = item; после инъекции item

13

Я сделал плункер для вас по адресу http://plnkr.co/FzU5SOv3pdZmAPAIOzdo.

Вы хотите разрешить свои данные так же, как и сейчас.

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

и в вашем модальный контроллер не забудьте включить в устранили объект размер следующим образом:

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

Что работал для меня, чтобы создать объект в resolve, который возвращает объект который содержит переменные, которые я хотел бы разделить.

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

Чтобы получить доступ к shared объекта, включите его при определении вашего модальный контроллер экземпляра.

app.controller('ModalInstanceController', function($scope, shared, $uibModalInstance,
Смежные вопросы