I am new to Ionic and AugularJS and I am having a problem opening up a modal box upon click on a checkbox/radio button on the third option for hashtag search in the settings page. I have included an ng-controller and ng-click to take action. I looked in the debugger and it displayed an error:
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
I know that 404 Not Found means it didn't find the templateUrl but every nav page I have is in the index.html and they work fine except hashtag-modal.html in the app.js file. Why isn't it working and how do I resolve this issue?
app.js
// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('hashtag-modal', {
url: '/hashtag-modal',
templateUrl: 'hashtag-modal',
controller: 'hashtag-modalCtrl'
})
$urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
};
}]);
// hashtag search modal
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).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
});
});
index.html
<!-- SETTINGS -->
<script id="settings.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Settings" hide-back-button="false">
<ion-content class="padding">
<!-- The content of the page -->
<p>Check one of the options below to set how you wish to categorize and view your Instagram photos.
</p>
<div class="settings-list">
<label class="item item-radio">
<input type="radio" name="settings-group" value="recent">
<div class="item-content">
Recent
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="settings-group" value="popular">
<div class="item-content">
Most Popular
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
</ion-view>
</script>
<!-- HASHTAG SEARCH MODAL -->
<script id="hashtag-modal.html" type="text/ng-template">
<ion-modal-view hide-back-button="false">
<ion-header-bar>
<h1 class="title">Hashtag Search</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-content>
</ion-modal-view>
</script>
Revised app.js
I added an $ionicModal to the hashtagController but it is said Error: $ionicModal is undefined. Where else is it undefined?
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope, $ionicModal)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).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
});
}
}]);
Revised label
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
ionic modal has nothing to do with routes.
You just load a static html template from server, and that same html is shown in ionic modal with all the bindings.
Instead of declaring a seperate controller, move it inside the same controller :
app.controller('hashtagController', ['$scope', function($scope, $ionicModal) {
$scope.hashtag = function() {
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
};
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.$on('modal.hidden', function() {
// Execute action
});
$scope.$on('modal.removed', function() {
// Execute action
});
}
Then in your HTML :
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
Ionic has a nice codepen example showing how to open a modal with an ng-click
http://codepen.io/ionic/pen/gblny
Related
Have two component. The first have an ng-click and call the modal with the second component, everything works fine. What the problem is the modal should only be opened in 768 resolution...
Already try with media queries but no success..
Thanks!
here is code:
parent.html:
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" ng-click="$ctrl.openModal()">
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 benefit-parenthood">
<div class="description">
<p class='title'>lorem impsun title</p>
<p class="area">
<i class="fa fa-cookie-bite cookie-icon" aria-hidden="true"></i>
<span class="area-item">lorem impsum</span>
</p>
<p class="area-mobile">lalala</p>
</div>
</div>
<div class="hidden-xs col-sm-3 col-md-3 col-lg-3 container-image">
<div class="partner-brand">
<img src="app/assets/greyimg.png" class="partner-avatar">
</div>
</div>
</div>
parent.component.js :
(function () {
'use strict';
angular
.module('parenthoodBenefit')
.component('parenthoodBenefitComponent', {
bindings: {},
templateUrl: 'app/parenthood-benefit/parenthood.html',
controller: parenthoodBenefitCtrl
})
function parenthoodBenefitCtrl($scope, $uibModal) {
this.openModal = function () {
$uibModal.open({
templateUrl: 'app/modal-benefit/modal.html',
size: 'lg',
controller: function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
}).result.then(function () { }, function (res) { })
};
}
}());
modal.html :
<i class="fa fa-times icon-close" aria-hidden="true" ng-click="ok()" ></i>
<access-detail-component></access-detail-component>
Inside this.openModal() method check if( $(window).width() > 767 ) { open modal.....}
1.Get the width of window as you did and simply disable the click
In Controller
$scope.width=$window.innerWidth <= 768? false: true;
2.In html add ng-disabled="width" to respective div
This may better approach
1.Updated answer - Add below function in your controller
- This will get updated width if width changes
angular.element($window).bind('resize', function(){
if($window.innerWidth <= 768){
$scope.width =false;
}else{
//to disable click of open modal
$scope.width =true;
//then close your modal forcefully
$uibModalInstance.close();
//Run digest
$scope.$digest();
});
2.In html add ng-disabled="width" to respective div
my code is working fine. but when i click on login button it changes the state as shown in the pic, it is changing its url but not opening that page.any help how can i redirect to next page?
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
login.html
<ion-view view-title="login">
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/login.html',
controller: 'AppCtrl'
})
.state('app.menu', {
url: '/home',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
' menuContent': {
templateUrl: 'templates/search.html'
}
}
})
});
Controllers.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
$state.go('app.search');
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
You made the search state being a child state of the app state (which displays your login).
So it will first display the template with the login, and this template does not include anything to help the other state being shown.
I think you want your states to be :
login with url /login
app with url /app and abstract
And then app.search with url /search.
Then in your url bar you will see /app/search and it will be the right URL and right state you are looking for.
I'm pretty much a newbie in the AngularJS world.
This is my problem. I would like to update the selected tab based on the url, so that the selected tab changes when the url changes.
This is my js:
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/page1', {
templateUrl: '/views/pages/page1.html',
controller: "TabController",
tab: 1
})
.when('/page2', {
templateUrl: '/views/pages/page2.html',
controller: "TabController",
tab: 2
})
.otherwise({
template: "Error 404"
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
});
//Tabs
app.controller("TabController", function($scope, $route){
$scope.activeTab = 0;
if(typeof $route.current != "undefined"){
setTimeout(function(){$scope.activeTab = $route.current.activeTab; console.log($scope.activeTab);},100);
}
});
And this is my html:
<div ng-controller="TabController">
<!-- Tabs -->
<section class="section section--xs">
<div class="container">
<div class="tab">
<div class="tab__single" ng-class="{active: activeTab === 1}">
Page 1
</div>
<div class="tab__single" ng-class="{active: activeTab === 2}">
Page 2
</div>
</div>
</div>
</section>
<!-- ./tabs -->
<!-- Content -->
<ng-view></ng-view>
<!-- ./content -->
</div>
I try and if I log the tab value, it actually updates, because it logs the correct value, but then the new tab doesn't get selected. Any suggestions?
You could create a function to search in your url parameters:
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
HTML:
<div class="tab">
<div class="tab__single" ng-class="{active: isActive('page1')}">
Page 1
</div>
<div class="tab__single" ng-class="{active: isActive('page2')}">
Page 2
</div>
</div>
I am using ionic to make a mobile app.I want to use a popup window to collect two pieces of data, a username and a password. I looked through a lot of website, it only shows how popup window can collect one piece of data, but not two. Also, I would like to make the popup window a purple color. How can I do that?
$scope.create = function() {
$scope.data = {};
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.one">',
style: 'background-color:purple;',
title: 'Enter Wi-Fi Password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-balanced',
onTap: function(e) {
if ((!$scope.data.one)&&(!$scope.data.two)) {
e.preventDefault();
} else {
return $scope.data;
}
}
}
]
});
}
You can achieve this using $ionicModal
Here is a working example
HTML
<script id="add-or-edit-cart.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">{{ action }} Page</h1>
<div class="buttons">
<button ng-click="deleteCart()" class="button button-icon icon ion-close"></button>
</div>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
Dummy Text
</label>
</div>
</ion-content>
</ion-modal-view>
</script>
Add ng-click to the View cart present in the footer
<ion-footer-bar class="bar-footer btn-footer bar-light">
<div class="row">
<div class="col">
<button ng-click="vm.showCart()" ng-controller="OverviewController as vm" class="button button-block button-positive"> View cart Page </button>
</div>
<div class="col">
<button class="button button-block button-calm"> View checkout page </button>
</div>
</div>
</ion-footer-bar>
JS
Add the Following Controller
.controller('OverviewController', function ($scope, $ionicModal) {
var vm = this;
$ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
vm.showCart = function () {
$scope.Cart = {};
$scope.action = 'Cart';
$scope.isAdd = true;
$scope.modal.show();
};
$scope.deleteCart = function () {
$scope.modal.hide();
};
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
return vm;
and here is working CodePen
i have used local storage to filter listpage .i have text box with clear button
when i clear button its not working becoze of that $scope.watch.if i enter values in text box also $scope.watch is not allowed the values how to avoid this error when i click clear button.when i clear or ng-model changes i need to pick current value based on that value list should come
.controller('ListingCtrl', [
'$scope', '$http', '$location', '$window', '$filter','$ionicPopover','$ionicLoading',
function($scope, $http, $location, $window, $filter, $ionicPopover, $ionicLoading) {
$scope.$watch(function() {
var searchstore =window.localStorage.getItem("searchstore");
console.log(searchstore);
$scope.query=searchstore;
})
$scope.clearSearch = function()
{
$scope.query = '';
};
$http.get('*****').success(function(data,dealers,response)
{
$scope.dealers = data;
});
}])
<!-- begin snippet: js hide: false -->
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper" >
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="query" >
</label>
<button class="button button-icon ion-ios-close-outline" ng-click="clearSearch()" id="iconcolor" >clear</button>
</div>
<div class="list card" data-ng-init="nearme()" data-ng-repeat="dealer in dealers | filter:query ">
<div class="item item-thumbnail-left item-icon-right" href="#">
<h2>{{dealer.Store_Name}}</h2>
<p>{{dealer.S_Address.area}} {{dealer.S_Address.city}}</p>
<p>{{dealer.S_Services}}</p>
</div>
</div>
This should work like you want it.
$scope.$watch(function() {
return window.localStorage.getItem("searchstore")
},
function(searchstore) {
$scope.query = searchstore;
});
$scope.clearSearch = function() {
// You could remove aswell, but I prefer setting it empty
// window.localStorage.removeItem("searchstore");
window.localStorage.setItem("searchstore", "");
};