[英]Angular-ui modal - pass data into modal
I am trying to pass some model data into a modal window when it is opened. 我正在尝试将一些模型数据打开时传递给模式窗口。 When the user clicks on an element I want to have the modal window open and display more detailed information relating to what was clicked on.
当用户单击某个元素时,我想打开模式窗口并显示与单击的内容有关的更详细的信息。
I have created a plunker that works how I want it to except for passing the data into the modal window. 我创建了一个插件 ,该插件可以将数据传递到模态窗口中,除了我希望的那样工作。
I am trying to pass the data in using ng-click: 我正在尝试使用ng-click传递数据:
<img ng-src="{{item.picture}}" width="100" ng-click="open(item)"/>
Can anyone help me with this? 谁能帮我这个? or point me in the right direction?
或指出正确的方向?
I've made a plunker for you at http://plnkr.co/FzU5SOv3pdZmAPAIOzdo . 我在http://plnkr.co/FzU5SOv3pdZmAPAIOzdo上为您做了一个小矮人。
You want to resolve your data much like you do items currently. 您希望像当前处理项目一样解析数据。
$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;
}
}
});
and in your modal controller make sure to include the now resolved size object as follows: 并确保在模态控制器中包括如下所示的现在解析的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');
};
});
What worked for me was to create an object within resolve
that returns an object that holds the variables that I wanted to share. 对我有用的是在
resolve
中创建一个对象,该对象返回一个包含要共享的变量的对象。
resolve: {
shared: function(){
return {
name: 'Spencer',
numbers: [1, 2, 3]
}
}
}
To access the shared
object, include it when defining your modal instance controller. 要访问
shared
对象,请在定义模式实例控制器时将其包括在内。
app.controller('ModalInstanceController', function($scope,
shared, $uibModalInstance,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.