Javascript 如何在ionic中弹出个人资料图片

我是爱奥尼亚的新手。我正在创建一个带有用户列表的应用程序。我已成功填充了用户列表。但每当我单击图片时，我都想弹出特定的用户配置文件图片。比如whatsapp弹出窗口。 我做不到。下面是我的代码

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>

---

你可以使用离子模式

角度。模块'ionicApp'，['ionic'] .controller'MyController'，函数$scope，$ionicModal{ $ionicModal.fromTemplateUrl'my-modal.html'{ 范围：$scope， 动画：“向上滑动” }.Then功能模态{ $scope.modal=modal； }; $scope.openModal=函数{ $scope.modal.show； }; $scope.closeModal=函数{ $scope.modal.hide； }; //当我们完成后，清理模态！ $scope.$on'$destroy'，函数{ $scope.modal.remove； }; //对隐藏模式执行操作 $scope.$on'modal.hidden'，函数{ //执行操作 }; //对移除模式执行操作 $scope.$on'modal.removed'，函数{ //执行操作 }; }; 我的情态标题 你好

触发模式

---

你可以使用离子模式

角度。模块'ionicApp'，['ionic'] .controller'MyController'，函数$scope，$ionicModal{ $ionicModal.fromTemplateUrl'my-modal.html'{ 范围：$scope， 动画：“向上滑动” }.Then功能模态{ $scope.modal=modal； }; $scope.openModal=函数{ $scope.modal.show； }; $scope.closeModal=函数{ $scope.modal.hide； }; //当我们完成后，清理模态！ $scope.$on'$destroy'，函数{ $scope.modal.remove； }; //对隐藏模式执行操作 $scope.$on'modal.hidden'，函数{ //执行操作 }; //对移除模式执行操作 $scope.$on'modal.removed'，函数{ //执行操作 }; }; 我的情态标题 你好

触发模式

在您的ChatCtrl in controller.js文件中添加以下代码

注意：不要忘记向控制器注入$ionicModal服务

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

下面是用户缩略图上带有user_photo.html模板和showUser函数的代码，用于您的chat.html文件

注意：将chat.html中的全部代码替换为以下代码

<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>

在您的ChatCtrl in controller.js文件中添加以下代码

注意：不要忘记向控制器注入$ionicModal服务

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

下面是用户缩略图上带有user_photo.html模板和showUser函数的代码，用于您的chat.html文件

注意：将chat.html中的全部代码替换为以下代码

<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>