モーダルウィンドウを開くときに、モデルデータをモーダルウィンドウに渡そうとしています。ユーザーが要素をクリックすると、モーダルウィンドウが開き、クリックされた内容に関する詳細情報が表示されます。
plunker を作成しました。これは、データをモーダルウィンドウに渡すことを除いて、希望どおりに機能します。
私はng-clickを使用してデータを渡そうとしています:
<img ng-src="{{item.picture}}" width="100" ng-click="open(item)"/>
誰でもこれで私を助けることができますか?または正しい方向に私を向ける?
this ?
解決にアイテムを追加しました
resolve: {
items: function () {
return $scope.items;
},
item: function(){
return size;
}
}
そして、controller
で私はやっています:$scope.item = item;
item
を注入した後
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');
};
});
私のために働いたのは、共有したい変数を保持するオブジェクトを返すresolve
内にオブジェクトを作成することでした。
resolve: {
shared: function(){
return {
name: 'Spencer',
numbers: [1, 2, 3]
}
}
}
shared
オブジェクトにアクセスするには、モーダルインスタンスコントローラーを定義するときにそれを含めます。
app.controller('ModalInstanceController', function($scope, shared, $uibModalInstance,