简体   繁体   中英

Angular passing data to modal and modal instance

I have a problem with passing data to my modal. I am using ng-repeat to display data from json file which looks like this

[
  {
   "id": 1,
   "userId": 0,
   "userName": "Krzyniu",
   "question":"abczxcvbnmasdfghjklqwewertyu",
   "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "voteCount": 18,
   "date": 7,

  },
  {
    "id": 2,
    "userId": 3,
    "userName": "Pablo",
    "question":"def?",
    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "voteCount": 5,
    "date": 3,

  }
]

I want to use userId to open a modal that is displaying data from the other json file containing specific user profile data like activity level, number of comments etc.

I am using ui bootstrap and my controllers looks like that

    .controller('modalCtrl', function ($http, $scope, $uibModal, $log) {

      $http.get('json/users.json').success(function(data){
        $scope.items = data;
      });

      $scope.open = function (size) {

        var modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            items: function () {
              return $scope.items;
            },
            item: function(){
              return size;
            }
          }
        });

      };
    })

and that

.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, item) {
      console.log();
      $scope.item = item;
      $scope.items = items;
      $scope.selected = {
        item: $scope.items[0]
      };

      $scope.ok = function () {
        $uibModalInstance.close($scope.selected.item);
      };

      $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      }
    })

This is work for a DataService.

As you can find in Jhon Papa's angular styleguide .

All Angular services are singletons That's why services are the best way to share data between controllers.

Take a look at the specific session about data services here .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM