1

I am having serious difficulties updating a view in Ionic/Angular when using ng-click.

I came across a similar issue earlier on but solved it following this guidance, which explains that if your button is inside a < label > ng-click will not work.

What am I trying to achieve?

I am developing a mobile application and want to allow a user edit their details if necessary. In an effort to start off most simply I have began by trying to implement the functionality whereby a user can edit their name. In the example below I am trying to change the name of the user when a button is clicked.

The strange thing is when I console.log(Photos.name) I get the correct value, i.e.(scope.user.name = "Jim") however the view does not reflect this change.

The code I have is as follows:

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 is that updates 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>

I have read through many SO answers and those on the ionic webpage, with no luck. From what I have read I think that it may be something to do with setting the value in a child scope is the thing that is breaking it but I cannot be sure.

Can anyone help?

Community
  • 1
  • 1
Paul Fitzgerald
  • 11,770
  • 4
  • 42
  • 54

1 Answers1

4

I believe the reason is that once you do this:

$scope.user = {
    "name": Photos.name
}

You set the value of $scope.user.name to the value of Photos.name at that moment.

When you change Photos.name by doing o.name = 'Jim' within your factory, you're essentially assigning Photos.name a different string object, not changing the one that is already assigned to $scope.user.name.

You can prove my theory by doing something like $scope.user = Photos instead of $scope.user = { ... } (just as a quick proof of concept, of course, rather than a final solution). This way $scope.user.name will actually access the name value that's being held in the Photos factory.

SkyWriter
  • 1,454
  • 10
  • 17
  • Unfortunately that's not it – Paul Fitzgerald May 11 '15 at 15:47
  • 1
    Oops. I'm afraid it won't work. Strings in JavaScript are immutable. `replace` will only create a new one. But here's what should work: `$scope.user = Photos` instead of `$scope.user = { ... }` (just as a quick proof of concept, of course, rather than a final solution). – SkyWriter May 11 '15 at 15:47
  • how do you mean ```$scope.user = Factory```? Are you aware of child scopes and angular http://stackoverflow.com/questions/13428042/angularjs-access-to-child-scope . Now I am not 100% sure of them hence why I am asking here, but I think it may be something to do with this – Paul Fitzgerald May 11 '15 at 15:49
  • Fixed my comment. `Photos`, of course, not `Factory`. Sorry about that. – SkyWriter May 11 '15 at 15:52
  • Bummer. Works for vanilla AngularJS though: http://jsfiddle.net/8NFJp/296/. Hope that helps. – SkyWriter May 11 '15 at 16:04
  • I tried this, works on Ionic also. $scope.user = Photos; actually with ionic serve, not tried with emulator. – adt May 11 '15 at 17:00
  • works after further investigation, thanks @SkyWriter – Paul Fitzgerald May 11 '15 at 18:06
  • my pleasure, @PaulFitzgerald; updated the answer to be correct on its own right, without need to read the comments – SkyWriter May 13 '15 at 06:16