I have an application which uses AngularJS. I have a contact us page where in i populate the the name, email field based on the logged in user. Now lets say user updates his/her name or email from profile page and that should reflect in the contact us page. The contact us page is loaded as a modal dialog, and the updated value is not reflected until i reload the page.
The $modal.open{...}) returns an object which result property is a promise:
$modal.open({...}).result
is a promise. You can attach a success handler to update the data in the controller. When you close the modal whether using $modalInstance.close or $close in your HTML, do not forget to call it with the newUserName as argument.
function yourCtrl ($scope) {
$scope.userName = // whatever
$modal.open({...}).result.then(function (newUserName) {
// update the userName:
$scope.userName = newUserName;
});
}
Lets say in Profile page...you have a modal....umm, say $scope.name. If you're triggering the Contact page modal dialog from inside the Profile page - meaning the Contact page is a child of the Profile page...in your html, you could say:
<xx>{{$parent.name}}</xx>
Makes sense?
Related
I am pretty new to AngularJS and got to fix a bug in prod.
There is controller
app.controller('myCtrl', function ($scope, DatamodelUser) {
$scope.clickbutton = function (rs) {
var usr = DatamodelUser.UserAction('xyz'); //This performs some action
$scope.result = usr;
}
});
<button ng-click="clickbutton(rs)" >OK</button>
What I see is DatamodelUser.UserAction is actually invoked on a button click method works only the 1st button click after the page is loaded.. the 2nd time I click a button it does not work.
After I refresh the page again and click the button then only it works.
What I think to do is after the button is clicked I am thinking of resetting the data or refreshing DatamodelUser so that each time the user clicks the button the data loads.
any help on this is appreciated, apologies if the questions are not clear I am new to this.
I have a problem navigating to a state from the address bar or when i refresh the current state.
i have the following code:
Controller:
$scope.selectCategory = function(category) {
$location.path('/posts/' +category.category);
$scope.posts=[];
Post.query({category: category.id}).$promise.then(function(posts){
$scope.category = $stateParams.category;
$scope.posts = posts;
$scope.sortBy = "-updated";
$scope.letterLimit = 100;
$scope.postDisplayed = 6;
function setCurrentPost(post) {
$scope.currentPost = post;
}
$scope.setCurrentPost = setCurrentPost;
});
}
so in the code above i'm binding my posts to scope category, when a user click a particular category, he will be directed to a page which render the posts of that specific category.
I'm calling the url in state router as follows:
app.js:
.state('posts.category', {
url: '/:category',
templateUrl: 'static/partials/post/postlist.html',
})
then the user has to click a specific category to be directed to that url. I used ng-click to achieve that in my html:
<img ng-click="selectCategory(category)" ng-src="[[category.image]]" err-src="../../../static/img/imageholder.png" alt="img01"/>
I'm using Resource query to call posts from api as follows.
services:
.factory('Post', ['$resource', function($resource){
return $resource('/api/posts/:category', {category:'#category'});
}])
finally in the page rendering the posts, i'm using ng-repeat to loop through the posts as follows:
<div ng-repeat="post in posts | limitTo:postDisplayed | filter: searchText | orderBy: sortBy" >
So far evrything works fine. When the user clicks a specific category it is directed to the correct page and posts are rendered.
My problem if the user refresh the page or try to access the page by entering url in the address bar, or i sent the url link to someone and clicks on it, the page rendered is blank, which means the scope function selectCategory is not called at all. In other words my function selectCategory is only called through ng-click, otherwise is not called at all through state router. Any idea how to fix this issue? Thanks in advance.
From what I understood from your code, you don't have code that is responsible for loading category data when the URL in question is accessed directly.
For the sake of keeping things separate and not complicate your code you should really add a controller for your posts.category state. Modify your state like this:
.state('posts.category', {
url: '/:category',
templateUrl: 'static/partials/post/postlist.html',
controller: 'PostsCategoryController'
})
Then, create a PostsCategoryController which will be used for your posts.category state. Something like this
yourModule.controller('PostsCategoryController', PostsCategoryController);
PostsCategoryController.$inject = ['$scope', '$stateParams']; //add additional dependencies you need.
function PostsCategoryController($scope, $stateParams){
//code for handling posts category data and initialization
}
Then, load and initialize data in your PostsCategoryController. You can do that by taking the code from selectCategory method and modify it a bit, like this:
function PostsCategoryController($scope, $stateParams){
function selectAndInitializeCategory(){
//your Post.query code for getting the data (you can use $stateParams to get category)
}
selectAndInitializeCategory();
}
Please note that you will have to reference your PostsCategoryController in your static/partials/post/postlist.html template.
I have a sideMenu in my ionic project. I have a menu login. In my menu controller I have:
if (logged) {
$scope.loginText = 'Login';
}else{
$scope.loginText = 'Logout';
}
In my menu I simply add a {{loginText}} in the correct menu.
Then I do the login in another controller. When the user log in, I have to refresh the page to change the text. How can I change the text without need to refresh?
This is because the variable logged change is not detected on login. Since it is in different controller the change has to be manually send. this can be achieved by using $rootScope to send messages through different controller which are under the same parent controller. hence a message or an event has to be send. the below code will help.
in login controller after logged in.
$rootScope.$broadcast('isLOggedIn', true);
in menu controller
$scope.$on('isLOggedIn', function (event, data) {
if (data) {
$scope.loginText = 'Login';
}else{
$scope.loginText = 'Logout';
}
});
remember to inject $rootScope in login controller.
Using Angularjs. How do you handle the situation where a person reloads a page and the controller tries to query Firebase using the current user's uid before the Firebase auth event is triggered and has a chance to set the current user?
Details:
The Firebase query require's the user's uid and everything works when navigated to the route via $state.go('/list')
But when a person reloads the page the controller checks for the user which doesn't exist until this event handler fires:
auth.onAuthStateChanged(function(user) {
if (user) {
//Set user
UserSrvc.currentUser = user;
} else {
$state.go('/login');
}
});
app.controller('ListCtrl', function($scope, UserSrvc, Posts ) {
if (!UserSrvc.currentUser){
UserSrvc.getUser();
};
$scope.posts = Posts.list(); <--THIS GENERATES ERROR, SINCE NO USER YET
})
If Firebase still had the synchronous auth call this wouldn't be an issue since I could do the check and call at the beginning of the controller.
So:
What is the best way to handle this situation.
If user is not logged in, how does UserSrvc.getUser() navigate to $state.go('/login') without having Posts.list() execute?
The common way to implement this is by moving the loading of the posts into onAuthStateChanged():
app.controller('ListCtrl', function($scope, UserSrvc, Posts ) {
auth.onAuthStateChanged(function(user) { $timeout(function() {
if (user) {
UserSrvc.currentUser = user;
if (!UserSrvc.currentUser){
UserSrvc.getUser();
};
$scope.posts = Posts.list();
} else {
$state.go('/login');
}
})});
});
You'll note I added a $timeout() in there, since otherwise Angular won't be aware of the update we've made to $scope.
Note that we have a dedicated library binding Firebase to AngularJS called AngularFire, which does a lot of this automatically for you.
I have a navbar ul in a view that shouldn't be shown if the user isn't logged in. For this I'm using ng-show="session.exists()". When the logout button (also in the nav bar view) is clicked it calls:
$scope.logout = function () {
var success = function () {
$state.transitionTo('login');
};
console.log($scope.session.exists());
Auth.logout().then(success);
console.log($scope.session.exists());
};
from my log statements i can see that the see that the session is being destroyed ok but the el elements I want hidden are still visible. The elements are hidden if I refresh the page. Am I missing a trick here? I'm new to angular and have inherited a project so any suggestions greatly appreciated!
C
Probably your function are not being fired on ngShow when you destroy the user session.
I suggest you to use a variable to control that, and set it on on your logout function.
In your controller:
$scope.loggedIn = true;
$scope.logout = function() {
$scope.loggedIn = false;
}
And in your view:
<div data-ng-show="loggedIn">Show Me!</div>
I think you are trying to update the scope variable responsible for your showing your navbar url from an asynchronous function call probably in side the success of a http call.
So try adding $scope.$digest(); just after updating the scope variable