如何在离子中弹出个人资料图片

Question

I am new to ionic.I am creating a app with user list i have succesfully populated users list.but i want to popup particular users profile picture whenever i click on picture. Like whatsapp popup window. i am unable to do it.following is my code.

app.js

angular.module('shoppingPad', ['ionic','shoppingPad.controller', 'shoppingPad.service'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

      // setup an abstract state for the tabs directive
      .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
      })

      // Each tab has its own nav history stack:

      .state('tab.dash', {
        url: '/dash',
        views: {
          'tab-dash': {
            templateUrl: 'templates/tab-dash.html',
            controller: 'DashCtrl'
          }
        }
      })

      .state('tab.chats', {
        url: '/chats',
        views: {
          'tab-chats': {
            templateUrl: 'templates/chat.html',
            controller: 'ChatCtrl'
          }
        }
      })
      .state('tab.chat-details', {
        url: '/chats/:chatId',
        views: {
          'tab-chats': {
            templateUrl: 'templates/chat-details.html',
            controller: 'ChatDetailCtrl'
          }
        }
      })
      .state('tab.groups',{
        url:'/groups',
        views: {
          'tab-chats':{
            templateUrl:'templates/groups.html',
            controller:'groupCtrl'
          }
        }
      })
      .state('tab.newGroups',{
        url:'/new',
        views: {
          'tab-chats':{
            templateUrl:'templates/newGroup.html'
          }
        }
      });
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/chats');

  });

controller.js:

angular.module('shoppingPad.controller', [])

  .controller('DashCtrl', function($scope) {})

  .controller('ChatCtrl', function($scope, Contents) {


    //$scope.contents = Contents.query();
    $scope.contents = Contents.all();
    $scope.remove = function(chat) {
      Contents.remove(chat);
    };
  })

  .controller('ChatDetailCtrl', function($scope, $stateParams, Contents, $ionicPopup) {
    alert('details');
 //   $scope.contents = Contents.get({content_id: $stateParams.content_id});
 //alert($stateParams.content_id);
    $scope.content = Contents.get($stateParams.chatId);
    alert($stateParams.chatId);
    alert('data');
    $scope.showPopup=function(){
      alert('alertpopup');
     var alertPopup=$ionicPopup.alert({
       title:'hey',
       templateUrl:'templates/chat-details.html'
     });
      alertPopup.then(function(res){
        console.log('popup');

      });
    };

  })
  .controller('groupCtrl',function($scope,Groups){
    $scope.groups=Groups.group();
  });

chatServices.js

angular.module('shoppingPad.service',['ngResource']).
  factory('Contents',function() {
    //return $resource('http://54.86.64.100:3000/api/v1/content/content-info');

    var contents = [{
      id: 0,
      name: 'Ben Sparrow',
      lastText: 'You on your way?',
      face: 'img/ben.png'
    }, {
      id: 1,
      name: 'a',
      lastText: 'Hey, it\'s me',
      face: 'img/007.gif'
    }, {
      id: 2,
      name: 'b',
      lastText: 'I should buy a boat',
      face: 'img/ionic.png'
    }, {
      id: 3,
      name: 'c',
      lastText: 'Look at my mukluks!',
      face: 'img/profile-no-photo.png'
    }, {
      id: 4,
      name: 'd',
      lastText: 'This is wicked good ice cream.',
      face: 'img/profile-unknown-male.png'
    }];

    return {
      all: function() {
        return contents;
      },
      remove:function(content){
        contents.splice(contents.indexOf(content),1);
      },
      get:function(chatId) {
        for (var i = 0; i < contents.length; i++) {
          if (contents[i].id === parseInt(chatId)) {
            return contents[i];
          }
        }
        return null;
      }
    };
  });

chat.html

<ion-view view-title="Chats">
<ion-header-bar class="bar-subheader bar-light">
      <a href="#/tab/groups" class="button button-clear button-positive">Groups</a>
      <a href="#/tab/new" class="button button-clear button-positive">New group</a>
    </ion-header-bar>
  <ion-content>

      <ion-list>
        <div class="modal image-modal transparent" ng-click="showPopup()">
        <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="content in contents" type="item-text-wrap" href="#/tab/chats/{{content.id}}">
          <img ng-src="{{content.face}}" >
          <h2>{{content.name}}</h2>
          <p>{{content.lastText}}</p>
          <i class="icon ion-chevron-right icon-accessory"></i>
          <ion-option-button class="button-assertive" ng-click="remove(content)">
            Delete
          </ion-option-button>
        </ion-item>
          </div>
      </ion-list>

  </ion-content>
</ion-view>

Answer 1

Add below code in your ChatCtrl in controller.js file

$ionicModal.fromTemplateUrl('user_photo.html', { // Use Ionic Modal to show user photo
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.modal = modal;
});
$scope.openModal = function() {
    $scope.modal.show();
};
$scope.closeModal = function() {
    $scope.modal.hide();
};
$scope.$on('$destroy', function() {
    $scope.modal.remove();
});

$scope.showUser = function (user, event){
    if (event){
      event.stopPropagation(); //to prevent calling of showUser() and showPop() functions at same time
    }
    $scope.current_user = user;
    $scope.openModal();
}

Note: Don't forget to inject $ionicModal service to your controller

  .controller('ChatCtrl', function($scope, Contents, $ionicModal) {

And below code with user_photo.html template and showUser() function on user thumbnail is for your chat.html file

Note: Replace the whole code in chat.html with below code

<style type="text/css">
    .image-modal {
        width: 100% !important;
        height: 100%;
        top: 0 !important;
        left: 0 !important;
    }

    .transparent {
        background: rgba(0, 0, 0, 0.7);
    }

    .image {
        width: 100%;
        height: 600px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center, center;
    }

</style>
<ion-view view-title="Chats">
    <ion-header-bar class="bar-subheader bar-light">
        <a href="#/tab/groups" class="button button-clear button-positive">Groups</a>
        <a href="#/tab/new" class="button button-clear button-positive">New group</a>
    </ion-header-bar>
    <ion-content>

        <ion-list>

            <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="content in contents"
                      type="item-text-wrap" href="#/tab/chats/{{content.id}}" ng-click="showPopup()">
                <img ng-src="{{content.face}}" ng-click="showUser(content, $event)">

                <h2>{{content.name}}</h2>

                <p>{{content.lastText}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>
                <ion-option-button class="button-assertive" ng-click="remove(content)">
                    Delete
                </ion-option-button>
            </ion-item>

        </ion-list>
        <script id="user_photo.html" type="text/ng-template">
            <div class="modal image-modal transparent" on-swipe-down="closeModal()">
                <ion-scroll direction="xy"
                            zooming="true" min-zoom="1" style="width: 100%; height: 100%"
                            overflow-scroll="false">
                    <div class="image" style="background-image: url( {{current_user.face}} )"></div>
                </ion-scroll>
            </div>
        </script>
    </ion-content>
</ion-view>

Answer 2

You can use ionic modal

 angular.module('ionicApp', ['ionic']) .controller('MyController', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function() { // Execute action }); // Execute action on remove modal $scope.$on('modal.removed', function() { // Execute action }); }); 

 <html> <head> <script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script> <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/> </head> <body> <div ng-app="ionicApp"> <ion-content has-tabs="true" ng-controller="MyController"> <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title</h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-modal-view> </script> <p class="padding"> <button class="button button-positive button-block button-outline" ng-click="openModal()">Trigger modal</button> </p> </ion-content> </div> </body> </html>