I am encountering difficulties updating a view in Ionic/Angular using ng-click.
Prior to this, I faced a similar issue which I resolved by following advice from this source. It explained that if the button is within a <label>, ng-click will not function properly.
My Objective:
I am working on a mobile app where users should be able to edit their details when needed. Starting with simplicity, I want to implement a feature where users can edit their name. In the example below, I aim to change the displayed name of the user upon clicking a button.
Oddly enough, when I console.log(Photos.name), I receive the correct value ('scope.user.name = "Jim"'), but the view fails to reflect this update.
The code snippets are shown below:
Controller:
.controller('ProfileCtrl', function($scope, Photos) {
$scope.user = {
"name": Photos.name
}
$scope.changeName = function() {
Photos.changeName();
console.log(Photos.name)
};
})
Factory:
.factory('Photos', function(){
var o = {
name : 'James'
}
o.changeName = function(){
o.name = 'Jim'
}
return o;
});
HTML Settings Template:
This is where the button exists to update the user's name on the profile.html page (see below):
<ion-view view-title="Settings">
<ion-content>
<ion-list>
<div class="item item-input">
<span class="input-label">Change Profile Picture</span>
<button type="button" ng-click="changeName()">Add</button>
</div>
</ion-list>
</ion-content>
</ion-view>
Profile Template:
<ion-view view-title="My Profile">
<ion-content class="padding">
<div class="item item-body">
<p class="profile-details">
{{user.name}}
</p>
</div>
</ion-content>
</ion-view>
In my search for solutions on Stack Overflow and the Ionic website, I have not been successful. Based on my readings, it seems like setting the value in a child scope may be causing the issue, but I'm uncertain. Any assistance would be greatly appreciated.
Could anyone provide guidance?