Angularjs 1.4 - Two ways binding - Input text changed but scope does not?

Question

I have a very weird problem with AngularJS 1.4 (TypeScript). The problem is in the controller I have a variable and this value can be viewed in an input text box. However, when I edit the value in this text box and click on a button, the value of this variable doesn't change(!).

HTML view

<div class="form-group">   
     <label>Title</label>
     <input class="form-control" ng-model="serviceTitle">
</div>


<div class="form-group">
     <button class="btn btn-primary" ng-click="updateServiceIdentification()">Update Service Identifcation</button>
</div>

Controller:

 $scope.serviceTitle = "Test";

 $scope.updateServiceIdentification = ()=> {
    // after changing value in view, the value here is still "Test"????
    alert($scope.serviceTitle);
 }

If I add a test label in HTML view

<h1>{{serviceTitle}}</h1>

when I change the value of the input text box, the new value can be printed in this label.

like this `alert(serviceTitle);` or `alert(this.serviceTitle);` — Kaustubh Khare, May 24 '18 at 12:57
[ts] Property 'serviceTitle' does not exist on type 'AdminOWSMetadataManagementController' for both cases. — Bằng Rikimaru, May 24 '18 at 13:00
can you make a Plunker / JSFiddle example? With JavaScript your code works, so it's somehow broken with TypeScript in your example — Aleksey Solovey, May 24 '18 at 13:08
@AlekseySolovey It is quite large project so I couldn't create an example for you, also I'm new to AngularJS and TypeScript :D. — Bằng Rikimaru, May 24 '18 at 13:12
May want to check out the answers at https://stackoverflow.com/questions/12618342/ng-model-does-not-update-controller-value. — junkangli, May 24 '18 at 13:19
@junkangli thanks, your suggestion helped, I added an answer. — Bằng Rikimaru, May 24 '18 at 13:36

Bằng Rikimaru · Answer 1 · 2018-05-24T13:35:25.820

The problem comes from this and caused me few hours. If I add text box under this element, it cannot work. Put it outside, the alert() returns the changed value from the text box.

    <input class="form-control" ng-model="serviceTitle">
    <input type="button" class="btn btn-primary" ng-click="updateServiceIdentification()" value="Update Service Identifcation"/>
    <accordion>
            <accordion-group>
              <accordion-heading>
                        some text here, on the left side of the header.

                        <div class="pull-right">
                          <span>1st info</span>
                          <span>2nd info</span>
                          <span>maybe 3rd?</span>
                        </div>                
              </accordion-heading>
             <!------------ Doesn't work if it is inside ------------->
            </accordion-group>    
          </accordion>

The real problem should be "it's because a string is a primitive. When Angular assign the value it change the pointer to the value, so the controller looks at the old value because it have the old pointer to the value." Damax - Ng-model does not update controller value

Update Controller like this:

$scope.output = {serviceTitle: "1234567"};                
$scope.serviceTitle = "asdadasdsad";

$scope.updateServiceIdentification = (...args: any[])=> {
     alert($scope.output.serviceTitle);
}

and in view it can work under accordion elements.

   <uib-accordion close-others="false">
       <uib-accordion-group is-open="isAvailableLayersOpen">
           <input class="form-control" ng-model="output.serviceTitle">
           <input type="button" class="btn btn-primary" ng-click="updateServiceIdentification()" value="Update Service Identifcation"/>
       </uib-accordion-group>
  </uib-accordion>

Angularjs 1.4 - Two ways binding - Input text changed but scope does not?

1 Answers1