here i am stuck in my app with comments. i am making an app facebook like. where comment button take me to specific post is viewed on ionicModal. and i can comment on that post. My problem is i can comment on that post i cannot update it instantly where i have to close my modal and reopen to view updated data.
Here's my code
feed is ng-repeat value
<div ng-click="commentModalOpen(feed)">
the modal code is
$ionicModal.fromTemplateUrl('templates/comment.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.commentModal = modal;
});
$scope.commentModalOpen = function(feed) {
$scope.commentModal.show();
$scope.feed = feed;
};
where $scope.feed show me my post on ionicModal and update comment on modal
<textarea ng-model="obj.postcomment" id="postcomment" placeholder="Your Comment" autofocus="true"></textarea>
<div ng-click='btn_add(feed.PostId,obj);' >Post Comment</div>
the btn_add add my comments although want to show my updated comment on the ionicModal it self which im not able to
suggest some solution
Thanks in advance
Hopefully, the following example will clear things up. I recommend testing it out on play.ionic.io
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding" ng-controller="MainCtr">
<button class="button button-assertive" ng-click="openModal()">I'm a button</button>
</ion-content>
</ion-pane>
<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>
<div ng-repeat="obj in feed">
<div>{{obj.text}}</div>
<div>
<textarea ng-model="obj.postcomment" id="postcomment" placeholder="Your Comment" autofocus="true"></textarea>
<button ng-click="obj.text = obj.postcomment">post</button>
</div>
</div>
</ion-content>
</ion-modal-view>
</script>
</body>
</html>
js
angular.module('app', ['ionic']).controller('MainCtr', function($scope, $ionicModal) {
$scope.feed = [
{text:'fb is dumb ~la', postcomment:''},
{text:'no it\'s not lol', postcomment:''}];
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
});
Related
Expected Result: Opens up Title and Comment in titleDetails.html when Title is clicked in index.html.
Problem: URL changes to http://localhost:3000/titleDetails.html when Title is clicked.
But content remains the same. Page displays 0 post when I refreshed the URL.
Screenshot: (index.html) & (titleDetails.html after clicking a title in index.html)
Screenshot: (after refreshing titleDetails.html when content remains the same after redirecting from index.html)
Code:
1) index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
2) titleDetails.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
3) app.js
(function () {
angular
.module("BlogApp", [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
.controller("BlogController", BlogController);
function BlogController($scope, $http, $rootScope, $location) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.titleDetails = titleDetails;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post)
{
$scope.postDetail = post;
$location.path('/titleDetails.html');
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
AngularJS is a SPA (single page application) oriented. Your links are still tied to the classic multiple page navigation. You will have to re-work your app since $location and $http.get are not the correct services for loading templates and navigation in your scenario.
AngularJS can load the template and update the address bar accordingly as long you use the $routeProvider. Scoth.io made a simple tutorial on how to setup routing.
But you basically have to include ngRoute to your application:
angular.module('ngRouteExample', ['ngRoute'])
Then configure your routes:
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'blogPosts.html',
controller: 'BlogController'
})
.when('/post/:id', {
templateUrl: 'titleDetails.html',
controller: 'TitleController'
});
}
Since the answer can get very long, the following Plunker demonstrates a simple routing implementation for you to learn:
https://plnkr.co/edit/twmbG0G9XjOqF82JtyMC?p=preview
Im familiar with the standard way of setting up a angularjs project, what I'm trying to do is set the app with separate files for different controllers and directives based on the page. See below for better explanation.
www /
app.js
index.html
login /
loginDirective.js
loginPage.html
This is my apps.js file
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
(function () {
'use strict';
angular.module('app', ['ionic']);
})();
var app=angular.module('app');
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
this is my loginDirective.js
(function () {
'use strict';
var app=angular.module('app');
app.config(function($stateProvider) {
$stateProvider
.state('login', {
url: '/login',
template: '<loginDirective></loginDirective>'
})
})
app.directive('loginDirective', loginDirective);
function loginDirective() {
var directive = {
restrict : 'EA',
templateUrl : 'loginPage.html',
controller : loginController,
controllerAs : 'lg',
bindToController : true
};
return directive;
}
function loginController() {
var lg = this;
lg.test = 'this is a test';
console.log('RETURN = %s', 'test');
}
})();
this is my index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="login/loginDirective.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-dark">
<ion-nav-title>Sample APP</ion-nav-title>
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view ></ion-nav-view>
</div>s
</div>
</body></html>
last but not least loginPage.html
<html>
<head>
</head>
<body>
<div login-directive></div>
<ion-view view-title="Login" name="login-view" class="scroll-bg" hide-nav-bar="true">
<ion-content class="padding">
<div align="center" class="imagecontent">
<div style="text-align: center">
<img ng-src="img/logos#2x.png" width="250px">
</div>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" style="color: #ffffff" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" style="color: #ffffff" ng-model="data.password">
</label>
</div >
<div class="" >
<div class="">
<button class=" button button-block button-dark" ng-click="login(data)">LOG IN</button>
</div>
</div>
</ion-content>
<div style="position: absolute; bottom: 10%; width: 100%">
<div style="text-align: center">
<img ng-src="img/FNC_Logo.png" width="150px">
</div>
</div>
<ion-footer-bar align-title="right" class="footer-bg">
<div class="col text-right" ng-click="doSomething()">
<button class="button footerbtn-bg" ></button>
</div>
</ion-footer-bar>
</ion-view>
</body>
</html>
What am I doing incorrectly that causes my loginPage.html to not show up?
I may be wrong, because I a novice with AngularJS, but if I were you, I firstly would try to change:
templateUrl : 'loginPage.html'
into:
templateUrl : 'login/loginPage.html'
I came to such conclusion, because you included loginPage.js file in index.html, so it tries look loginPage.html in www directory, or in directory where it was called.
I met such case like yours today, but with images.
You state definition has problems:
$stateProvider
.state('login', {
url: '/login',
//This should be kebab-case
template: '<login-directive></login-directive>'
//NOT camelCase
//template: '<loginDirective></loginDirective>'
})
})
But I am not sure why you are using a directive for that state when you could define the state with a controller:
.state('login', {
url: '/login',
templateUrl : 'loginPage.html',
controller : loginController,
controllerAs : 'lg'
});
Try moving <div login-directive></div> into the ion-view.
Also inspect the console to see if console.log('RETURN = %s', 'test'); is actually outputted. At least you'd then know if the state is active or not.
Like #georgeawg said, you're overcomplicating this by using a directive as template. Why you did that in this example is beyond me. Also, your $state config should be in your app.js file.
Hi Guys I need to change the existing profile name in settings page.
1. First Name must be displayed in Username: {{name}}
2. I have given button to show dialog box to change name, when clicked save the name must be changed and displayed in the Username:{{name}} That is all i needed.. I need code like below, This code is just a example..
var app = angular.module('AngularApp', ['ngMaterial']);
app.controller('SettingCtrl', ['$scope', '$mdDialog',
function($scope, $mdDialog) {
$scope.name = "test";
$scope.ChangeName = function(ev) {
$mdDialog.show({
controller: SetDialogController,
template: '<md-dialog aria-label="Add insert" md-theme="dialogtheme"><md-content>' +
'<form name="ChangeName"><div layout layout-sm="column"><md-input-container flex>' +
'<label>Client Name</label><input ng-model="newname" placeholder="New Name">' +
'</md-input-container><div></form> </md-content>' +
'<div class="md-dialog-actions" layout="row"> <span flex></span>' +
'<md-button ng-click="cancel()"> Cancel </md-button>' +
'<md-button ng-click="saveClient()" class="md-warn"> Save </md-button>' +
'</div></md-dialog>',
targetEvent: ev,
clickOutsideToClose: true
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
}
]);
function SetDialogController($scope, $mdDialog) {
$scope.saveClient = function() {}
$scope.cancel = function() {
$mdDialog.cancel();
};
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ViewSalesVisit</title>
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="js/angular-material.min.css" rel="stylesheet">
<!-- cordova script (this will be a 404 during development) -->
<!-- <script src="cordova.js"></script> -->
<script src="js/angular.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="AngularApp" ng-controller="SettingCtrl">
<div>
<md-content md-scroll-y>
<md-toolbar class="md-toolbar-tools" layout-align="center">
<h3>Settings</h3>
</md-toolbar>
<div>
<h1>Username: {{name}}</h1>
<md-button class="md-primary md-raised" ng-click="ChangeName($event)" flex="100" flex-gt-md="auto">
Change Username
</md-button>
</div>
</md-content>
</div>
</body>
</html>
Thank you in advance guys..
I am a newb with angularjs and I am trying something that I believe should be very simple ... but turns out I am not figuring it out.
I have a $scope variable that I want to double bind (using ng-model) to a textarea. I was able to make it work on js fiddle websites but now on my code. I have tried to strip everything down to just a few lines and it still doesn't work, the controller is never updated.
this is my code:
js/main.js
var app=angular
.module('noclu', ['ionic', 'app.controllers'])
.config(function ($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu.main', {
url: "/main",
views: {
'menuContent': {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
}
}
});
$urlRouterProvider.otherwise("/menu/main");
});
js/controller.js
angular
.module('app.controllers', [])
.controller('MainCtrl', function ($scope){
$scope.src='---';
$scope.get_feeds=function(){
//seems like that here "this" is actually the textarea ??
//$scope.src is always whatever has been set in the controller
console.log('this:'+this.src); //this output whatever I enter in the textarea
console.log('scope:'+$scope.src); //this always output '---'
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="icon" type="image/png" href="favicon.png">
<title>NoClu</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="noclu">
<ion-nav-view></ion-nav-view>
</body>
</html>
template/main.html
<ion-view view-title="NoClu" >
<ion-content class="padding" id="src-wrapper-center">
<div ng-class="vertical_center">
<div id="src-wrapper">
<div>
<div class="padding src-title">What are you in the mood for ?</div>
<div class="item" id="src-txt-wrapper">
<textarea id="src" ng-model="src"></textarea>
</div>
<button id="search" class="button button-block button-large button-balanced" ng-click="get_feeds()" >
Let's eat
</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
UPDATE - I made it work, but why ?
I made it work by changing $scope.src='---'; to $scope.src={body:'---'}; and then changing the ng-modal to src.body. but.. WHY did not work the other way as it works for boolean?
Using directly $scope. is not a good practice in angularJS. There are various post of it, more concernign $scope inheritence.
For exemple : http://learnwebtutorials.com/why-ng-model-value-should-contain-a-dot
Therefore, your need to change your model like that :
$scope.myModel = {};
$scope.myModel.src = "---"
And your html to bind to myModel.src
Hey everyone I've been running into some issues with the header and scrolling on the side menus.
Although I've taken it out from this snippet, i've tried putting class/attr has-header in just about every possible combination:
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button icon ion-arrow-left-a" ng-click='back()'></button>
<h1 class="title">Ionic Shopping Checkout</h1>
<button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
</ion-header-bar>
<ion-purchase></ion-purchase> // custom directive
<ion-purchase-footer></ion-purchase-footer> // custom directive
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
</ion-side-menu>
</ion-side-menus>
Additionally, my ng-repeat of items in the side menu isn't scrolling, even when I nest them in an ion-scroll element. This is likely a completely unrelated issue, however I'm curious if anyone has come across that issue too.
Thanks for all the help in advance!
As mentioned above, the has-header attribute has in fact been removed. However, the has-header class still exists. Generally speaking, you don't need to manage those now.
I've setup a sample that should solve all of your problems.
http://codepen.io/calendee/pen/Fuejf
The key points are the same as those comments above, you content needs to go inside the ion-content directives.
Here is the HTML:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menus</title>
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
</head>
<body>
<div ng-controller="AppController">
<ion-nav-view></ion-nav-view>
</div>
<script id="app.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view name="appContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ion-cart ng-controller='CartController'></ion-cart>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Ionic Shopping Checkout">
<ion-content padding="true">
<ion-purchase></ion-purchase>
</ion-content>
</ion-view>
</script>
<script id="ionCart.html" type="text/ng-template">
<div class="list">
<div class="item" ng-repeat="item in data.items">{{item.label}}</div>
</div>
</script>
</body>
</html>
Here is the JS:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app.html"
})
.state('app.home', {
url: "/home",
views: {
'appContent' :{
templateUrl: "home.html",
controller : "HomeController"
}
}
})
$urlRouterProvider.otherwise("/app/home");
})
.controller('AppController', function($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller("HomeController", function($scope) {
})
.controller("CartController", function($scope) {
$scope.data = {
items : []
};
for(var i = 0; i < 25; i++) {
$scope.data.items.push({
id : i,
label : "Item " + i
})
}
})
.directive("ionCart", function() {
return {
restrict : "E",
templateUrl : "ionCart.html"
}
})
.directive("ionPurchase", function() {
return {
restrict : "E",
template : "<h2>This is Ion Purchase</h2>"
}
})