web-dev-qa-db-ja.com

Angular-ui modal-モーダルにデータを渡す

モーダルウィンドウを開くときに、モデルデータをモーダルウィンドウに渡そうとしています。ユーザーが要素をクリックすると、モーダルウィンドウが開き、クリックされた内容に関する詳細情報が表示されます。

plunker を作成しました。これは、データをモーダルウィンドウに渡すことを除いて、希望どおりに機能します。

私はng-clickを使用してデータを渡そうとしています：

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

誰でもこれで私を助けることができますか？または正しい方向に私を向ける？

angularjsmodal-dialogangular-uijquery-isotope
20
mcneela86

this ？

解決にアイテムを追加しました

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

そして、controllerで私はやっています：$scope.item = item;itemを注入した後

32
Mati Tucci

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');
  };
});
15
rtucker88

私のために働いたのは、共有したい変数を保持するオブジェクトを返すresolve内にオブジェクトを作成することでした。

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

sharedオブジェクトにアクセスするには、モーダルインスタンスコントローラーを定義するときにそれを含めます。

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