我是离线的新手。我正在创建一个带有用户列表的应用程序我已成功填充用户列表。但是我想在我点击图片时弹出特定用户个人资料图片。喜欢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>
答案 0 :(得分：3)
在ChatCtrl文件
controller.js添加以下代码
$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();
}
注意：不要忘记向您的控制器注入$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>
答案 1 :(得分：1)
您可以使用离子模态
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>