My back button is sending me to the first page/state of my app (cadastreSe). How can I force it to go back to previous page/state ('menu.temporada2016') with my button id="temporada2016-button3" active. Is it possible with angularjs?
I hat to enable it with $scope.$on('$ionicView.beforeEnter'...
states:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu.temporada2016', {
cache: false,
url: '/page1',
views: {
'side-menu21': {
templateUrl: 'templates/temporada2016.html',
controller: 'temporada2016Ctrl',
params: { dataToTemp: false }
}
}
})
.state('menu.fotos', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'templates/fotos.html',
controller: 'fotosCtrl'
}
}
})
.state('menu.configuraEs', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'templates/configuraEs.html',
controller: 'configuraEsCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('detalhes', {
cache: false,
url: '/page4',
params: {
dataToDetails: false
},
templateUrl: 'templates/detalhes.html',
controller: 'detalhesCtrl'
})
.state('cadastreSe', {
url: '/page5',
templateUrl: 'templates/cadastreSe.html',
controller: 'cadastreSeCtrl'
})
.state('home', {
url: '/page6',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('suporte', {
url: '/page7',
templateUrl: 'templates/suporte.html',
controller: 'suporteCtrl'
})
.state('fotos2', {
url: '/page8',
templateUrl: 'templates/fotos2.html',
controller: 'fotos2Ctrl',
params: {
dataToFotos: false
}
})
$urlRouterProvider.otherwise('/page5')
});
controller:
.controller('fotos2Ctrl', ['$scope', '$state', '$ionicModal', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', function ($scope, $state, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
$scope.$on('$ionicView.beforeEnter', function(event, viewData){
viewData.enableBack = true;
});
$scope.$on('$routeChangeSuccess', function(event, current, previous){
});
if(!$state.params.dataToFotos) {
console.log($state.params.dataToFotos);
}else{
console.log($state.params.dataToFotos);
$scope.images = $state.params.dataToFotos.album;
}
$scope.zoomMin = 1;
// image gallery
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/popover.html');
}
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
}
// Close the modal
$scope.closeModal = function() {
$scope.modal.hide();
$scope.modal.remove()
};
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$ionicSlideBoxDelegate.enableSlide(true);
} else {
$ionicSlideBoxDelegate.enableSlide(false);
}
};
}])
fotos2.html
<ion-view title="Fotos ..." id="page8" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<!--<div class="row responsive-md">
<div class="col col-25" ng-repeat="image in images">
<img ng-src="http://localhost/dashboard/{{image.FILE}}" width="100%" />
</div>
</div>-->
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 2].FILE}}" width="100%" ng-click="showImages($index+2)" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 3].FILE}}" width="100%" ng-click="showImages($index+3)" />
</div>
</div>
</ion-content>
</ion-view>
temporada2016.html
<ion-view title="Temporada 2016" id="page1" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<div id="temporada2016-button-bar1" class="button-bar">
<button id="temporada2016-button2" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_news_btn: active_news_btn}" ng-click="activate_news()">Notícias</button>
<button id="temporada2016-button3" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_albums_btn: active_albums_btn}" ng-click="activate_albums()">Fotos</button>
</div>
<form id="temporada2016-form8" class="list" ng-show="search_news">
<label class="item item-input" name="search_news">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Pesquisar Notícia" ng-model="searchNews">
</label>
</form>
<div class="item item-body list-container" id="temporada2016-list-item-container4" ng-model="item_id" ng-repeat="x in items | filter:searchNews" item="x" href="#/x/{{x.ID}}" ng-click="open_item(x)" ng-show="news_list">
<div id="temporada2016-markdown7" style="margin-top:0px;color:#666666;">
<h2 style="color:#008BBB;">{{ x.TITLE }}</h2>
</div>
</div>
<!--<ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
<ion-item class="item widget uib_w_2" data-uib="ionic/list_item" data-ver="0" ng-repeat="x in items">{{ x.TITLE }}</ion-item>
</ion-list>-->
<ion-list id="fotos-list4" ng-show="albums_list">
<ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
<i class="icon ion-images"></i>
{{item.FOLDER}}
<i class="icon ion-ios-arrow-forward"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
index.html
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
You can overwrite the header of the specific page by adding a new one to the template of the specific view. it should be even outside and above of the tag. simply have it mirror your normal header. then implement a back-button which looks the exact same, but have it trigger an ng-click event which you can then use to route the user to that specific view you want him to go back to, either by using $state.go() or by using the $ionicHistory dependancy to navigate back through the navigation stack.
Related
I have a modal view:
<ion-content id="friendContent" class="scroll-content has-header has-subheader" style="background-color: rgba(0, 0, 0, 0.6);">
<ion-list class="list">
<ion-item ng-repeat="objFriendInfo in objFriendInfoList | filter:{ Remark: data.searchQuery }" class="item item-avatar-left item-button-right searchFriendItemBackgroundColor"
ng-click="FriendList('chat',objFriendInfo,$event)">
<img class="imgFriendUser" ng-class="{ 'gray':objFriendInfo.state == 0 }" ng-src="{{::objFriendInfo.icon }}">
<h2 class="light">{{::GetAndSaveFriendName('friendlist_UserName',objFriendInfo.Remark,'16px', objFriendInfo) }}</h2>
<h3 class="positive" ng-click="FriendList('travellog',objFriendInfo,$event)">{{::GetAndSaveFriendTravellogName('friendlist_TravellogName',objFriendInfo.TravelLog_Name,'14px', objFriendInfo) }}</h3>
<div class="buttons" style="top:15px !important;">
<button class="center button button-small button-positive ion-edit" ng-if="objFriendInfo.id != user.id" style="font-size:16px;" ng-click="FriendList('remark',objFriendInfo,$event)"></button>
<button class="center button button-small button-positive icon-mapsay_delete" ng-if="objFriendInfo.id != user.id" style="font-size:25px;" ng-click="FriendList('delete',objFriendInfo,$event)"></button>
</div>
</ion-item>
</ion-list>
</ion-content>
and the function GetAndSaveFriendName code is:
$scope.GetAndSaveFriendName = function (name, text, fontSize, objFriendInfor) {
var strDisplayName = "";
console.log(text);
if (objFriendInfor.strDisplayName) {
strDisplayName = objFriendInfor.strDisplayName;
} else {
strDisplayName = ServiceForChatCommon.GetShowDivText(name, text, fontSize);
objFriendInfor.strDisplayName = strDisplayName;
}
return strDisplayName;
};
The problem is the function GetAndSaveFriendName will run twice, what's the reason?
[EDIT]
I decalre the controller like:
.config([
'$stateProvider',
function ($stateProvider) {
$stateProvider
.state('tabs.chat', {
url: '/chat',
views: {
'chatView': {
templateUrl: 'components/chat-component/chat-view.html',
controller: 'chatController'
}
}
})
}]);
I think I found the reason. The $digest of AngularJs run at least twice, the second recyle make sure the DOM is the up-to-date.
I am coding a weather app with open weather and I would like to save the city (the input) as a variable to call it on another view. So I would like to type in Vienna, send it to result.html and post there the current weather and to check which clothes I should wear, e.g. if the emperature is under 20° the app should say that I should wear a jacket.
Here is my home.html:
<ion-view title="" hide-nav-bar="true" hide-back-button="true">
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="img/appicon.png">
<h2>Weather App</h2>
<p>What clothes do you need?</p>
</div>
</div>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="City" ng-model="inputs.city">
</label>
<input class="button button-small" type="submit" ng-click="saveText(inputs)" value="Save" ng-controller="WeatherCtrl" />
</div>
</div>
</ion-content>
</ion-view>
Here my app.js:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'views/home.html'
})
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeCtrl', function($scope) {
$scope.forcastDisabled = true
})
.controller('WeatherCtrl', function ($scope, $http, $ionicLoading, $location) {
var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
$scope.getIconUrl = function(iconId) {
return 'http://openweathermap.org/img/w/' + iconId + '.png';
};
$scope.save = {};
$ionicLoading.show();
$scope.saveText = function (inputs) {
alert('Geht');
$location.path('result');
$scope.save = angular.copy(inputs);
$scope.inputs.city;
}
var vm = this;
// Vienna
var id = 2761369;
var city = 'Vienna';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city;
var request = {
method: 'GET',
url: URL,
params: {
q: city,
mode: 'json',
units: 'imperial',
cnt: '7',
appid: '938c0cf5969f353bc718735f59aeffd6'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
$scope.weather = response.data;
}).
catch(function(response) {
vm.data = response.data;
$scope.weather = response.data;
});
$ionicLoading.hide();
});
And last my result.html:
<ion-view view-title="Current Weather">
<ion-content>
<div class="list card">
<div class="item item-divider"><h1>City: {{weather.name}}</h1></div>
<div class="item item-thumbnail-left">
<img src="{{getIconUrl(weather.weather[0].icon)}}" />
<h1>{{weather.weather[0].main}}</h1>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Current Temperature: {{weather.main.temp}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's High: {{weather.main.temp_max}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's Low: {{weather.main.temp_min}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-waterdrop"></i>
<h2>Humidity: {{weather.main.humidity}}%</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-shuffle"></i>
<h2>Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}</h2>
</div>
</div>
</ion-content>
</ion-view>
I know I am not currently using the input, because I do not know how to do this in js. So how can I call my input in the url and then in the request?
Thanks in advance!
Try to:
Add the city variable as a parameter to your state definition:
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html',
params: {
city: null
}
})
Pass the variable to the target state:
$state.go("result", {city: inputs.city});
Inject the $stateParams service and use the variable in the controller:
var city = $stateParams.city;
See https://github.com/angular-ui/ui-router/wiki/URL-Routing for more details.
EDIT
Check out this plunker demonstrating my changes: https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz
Note that I moved the saveText() function to the HomeCtrl and removed the ng-controller directive from your home.html.
My app uses tabs, a side menu, and the master details pattern. But, for some reason, when I try to navigate to the details page of an item in the list, nothing comes up. I'm not sure if I have the routing wrong or something.
If someone could help me out, I would really appreciate it! This is driving me crazy!
Thanks!
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('event-detail', {
url: '/event-detail/:name',
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
})
tab-feed.html
<ion-view view-title="Feed" class="tab-feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/event-detail/{{event.name}}">
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
EventDetailsController
.controller('EventDetailCtrl', ['getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var name = $stateParams.name;
$scope.event = getLocalStorage.getEvent(name);
}])
getLocalStorage Service
.factory('getLocalStorage', function () {
var eventList = [];
return {
list: eventList,
updateEvents: function (eventsArr) {
if (window.localStorage && eventsArr) {
localStorage.setItem("events", angular.toJson(eventsArr));
}
//update the cached version
eventList = eventsArr;
},
getEvents: function () {
eventList = angular.fromJson( localStorage.getItem("events") );
return eventList ? eventList : [];
},
getEvent: function(name){
for(i=0;i<eventList.length;i++){
if(eventList[i].name == name){
return eventList[i];
}
}
}
};
})
Can you try the following:
1) Add abstract: true to your tabs state:
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
abstract: true,
templateUrl: 'templates/tabs.html'
})
2) In your EventDetailsCtrl, if you're thinking of minification, add all your injection parameters, in order, before function... like this:
.controller('EventDetailCtrl', ['$scope', 'getLocalStorage', '$stateParams', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
If the above doesn't help, please post your tabs.html code.
My app uses tabs, a side menu and a master detail pattern. But, for some reason, I can't figure out how to make it navigate to the detail page of an item in the list. I've been trying to figure it out for days but I'm pretty new to Ionic and Angular...
If anybody could tell me what's wrong, I would really appreciate it.
tab-feed.html
<ion-view view-title="Feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.name}}">
<!-- <ion-item class="item item-thumbnail-left" ng-repeat="event in events" type="item-text-wrap" ui-sref="event({eventId:event.id})">-->
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
tabs.html
<ion-view view-title="Tabs">
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Feed Tab -->
<!-- <ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="app.tabs.feed">-->
<ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tabs.event-detail', {
url: '/feed/:eventId',
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
...
$urlRouterProvider.otherwise('/tab');
});
controllers.js
.controller('FeedCtrl', ['$scope', 'getLocalStorage', '$ionicModal', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $ionicModal, $ionicSideMenuDelegate) {
$scope.info = {};
$scope.events = getLocalStorage.getEvents();
$scope.clearSelected = function() {
$scope.events = $scope.events.filter(function(item) {
return !item.selected;
});
getLocalStorage.updateEvents($scope.events);
};
$scope.addEvent = function() {
$scope.events.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateEvents($scope.events);
$scope.info = {};
};
$ionicModal.fromTemplateUrl('new-event.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.name;
$scope.event = getLocalStorage.getEvent(eventId);
})
Your name of parameter in the URL doesn't match the requested parameter in the controller and the link in tab-feed.html.
app.js
.state('tabs.event-detail', {
url: '/feed/:eventId', // <-- The parameter is defined as eventId
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
controller.js
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.eventId; // <-- here you request the parameter
$scope.event = getLocalStorage.getEvent(eventId);
})
And last you also need to correct the href-attribute in
tab-feed.html
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.eventId}}">
Of course, you also can use the name as parameter, but you have to be consistent.
This is a small project just for learning purposes.
The objective is that when I click in the + button in front of the name of the game, the AngularJS material popup show up. Its working, but I want it to work for the different games. With a different HTML template correspondent to the game I click.
Here is my project.
https://github.com/hseleiro/myApp
index.html
<div ng-view>
</div>
assets/js/mainApp.js
var stuffApp = angular.module('myApp', ['ngAnimate','ngRoute','ngMaterial','ui.bootstrap.tpls','ui.bootstrap']);
stuffApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/',
{
templateUrl: 'pages/home.html',
controller: 'mainController',
})
.when('/games',
{
templateUrl: 'pages/games.html',
controller: 'mainController'
})
})
stuffApp.controller('mainController', function ($scope,$mdDialog){
$scope.query = {}
$scope.queryBy = '$'
$scope.games = [
{
"name" : "BloodBorne",
"consola" : "Playstation 4"
},
{
"name" : "Mass Efect 3",
"consola" : "Xbox 360"
},
{
"name" : "Pro Evolution Soccer 6",
"consola" : "Xbox 360"
}
];
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'pages/dialog1.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
function DialogController($scope, $mdDialog) {
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
});
pages/games.html
<div class="container">
<div class="row">
<div class="titulo">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<h1><i class="fa fa-gamepad fa-4x"></i></h1>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<div class="search_icon">
<h4><i class="fa fa-search fa-4x"></i></h4>
</div>
</div>
<div class="col-sm-11">
<div class="search_bar">
<div><input class="form-control" ng-model="query[queryBy]" /></div>
</div>
</div>
</div>
<hr>
<div>
<table class="table">
<tr>
<th>Nome</th>
<th>Consola</th>
</tr>
<tr ng-repeat="game in games | filter:query">
<td>{{game.name}}<md-button class="md-primary" ng-click="showAdvanced($event)">
<i class="fa fa-plus"></i>
</md-button></td>
<td>{{game.consola}}</td>
</tr>
</table>
</div>
</div>
pages/dialog1.tmpl.html
<md-dialog aria-label="">
<form>
<md-dialog-content class="sticky-container">
<md-subheader class="md-sticky-no-effect"></md-subheader>
<div>
<p>
Test
</p>
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="assets/img/bloodborne.jpg">
<p>
Test
</p>
<p>
Test
</p>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="answer('useful')" class="md-primary">
Close
</md-button>
</div>
</form>
</md-dialog>
Could some one help me ? Thanks
Sounds like you need to parameterize the controller and template you pass to $mdDialog.
For example:
$scope.showAdvanced = function(ev, popupIdentifier) {
$mdDialog.show({
controller: popupIdentifier + 'Controller',
templateUrl: 'pages/' + popupIdentifier + '.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
and then simply call the function with whatever popup content you need:
$scope.showAdvanced($event, 'Game1');