AngularJS code data-binding through function is not working

Question

When I click the button, default/init values are appended into the textArea but when I try to change the text (firstName/ middleName / lastName) in their respective field, clicking the button has no effect.

Associated code is spread across the following files: MainHTML, cashierApp.html, cashier.js, cashierCtrl.ctrl.js, cashierService.service.js and headTemplate.html

Main HTML page

<html ng-app="cashierAPP">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <title>Cashier-HomePage</title>
  <link href="header.css" rel="stylesheet">
  <link href="pageTemplate.css" rel="stylesheet">
</head>

<body ng-controller="cashierController">
  <ng-include src="'CashierApp.html'"></ng-include>

  <script src="http://127.0.0.1:8887/cashier.js"></script>
  <script src="http://127.0.0.1:8887/cashierCtrl.ctrl.js"></script>
  <script src="http://127.0.0.1:8887/cashierService.service.js"></script>
</body>

</html>

CashierApp.html

<div>
  <div>
    <ng-include src="'http://127.0.0.1:8887/headtemplate.htm'"></ng-include>
  </div>
  <div>
    <h4>Enter First name</h4><input type="text" ng-model="firstName"><br>

    <h4><input type="checkbox" ng-model="hasMiddle">Enter Middle name</h4>
    <input type="text" ng-show="hasMiddle" ng-model="middleName"><br>

    <h4>Enter last name</h4><input type="text" ng-model="lastName"><br><br>

    <button ng-click="getName()">Get Name</button><br>

    <h4> Your Full Name: &nbsp &nbsp <textarea ng-bind="fullName" readonly></textarea> </h4>

  </div>
</div>

Cashier.js--

var cashierApp = angular.module("cashierAPP",[]);

CashierCtrl.ctrl.js

cashierApp.controller("cashierController", function($scope, cashierService) {
  $scope.firstName = "John";
  $scope.middleName = "0";
  $scope.lastName = "Doe";
  $scope.getName = function() {
    $scope.fullName = cashierService.NameIs($scope.firstName, $scope.middleName, $scope.lastName);
  }
});

CashierService.service.js

cashierApp.service("cashierService", function() {
    this.NameIs = function(a, b, c) {
        return a + " " + b + " " + c;
    }
});

headTemplate.html

<table cellspacing="50px" ; cellpaddinging="20px">
  <tr>
    <th>AngularJS Cashier Application</th>
    <th>This is my Global Nav item 2 </th>
    <th>This is my Global Nav item 3 </th>
    <th>Participant</th>
  </tr>
  <tr>
    <td>HOME</td>
    <td>ABOUT</td>
    <td>CALCULATIONS</td>
    <td>MORE...</td>
  </tr>
  <tr class="pageBody">
    <td>Put Widgets here...</td>
  </tr>
</table>

Did you try changing `ng-bind="fullName"` to `ng-model="fullName"`? — 31piy, Oct 14 '19 at 08:42
New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, `ng-view`, `ng-include` and `ng-if` all create new child scopes, so the problem often shows up when these directives are involved. This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your `ng-models`. — georgeawg, Oct 14 '19 at 20:33

score 0 · Accepted Answer · edited Oct 14 '19 at 20:41

Since you are using ng-include it will create a separate child scope. So ng-model is not getting updated. You need to use $parent to access the ng-model properties like below.

<div>
    <div>
      <ng-include src="'http://127.0.0.1:8080/headtemplate.htm'"></ng-include>
    </div>
    <div>
      <h4>Enter First name</h4><input type="text" ng-model="$parent.firstName"><br>

      <h4><input type="checkbox" ng-model="hasMiddle">Enter Middle name</h4>
      <input type="text" ng-show="hasMiddle" ng-model="$parent.middleName"><br>

      <h4>Enter last name</h4><input type="text" ng-model="$parent.lastName"><br><br>

      <button ng-click="getName()">Get Name</button><br>

      <h4> Your Full Name: &nbsp &nbsp <textarea ng-model="fullName" readonly></textarea> </h4>

    </div>
  </div>

The use of `$parent` is a [code smell](https://en.wikipedia.org/wiki/Code_smell). It is a fragile solution that will fail if there are more than one level of directives with child scopes. The best practice is to define objects in the parent for the model, then reference a property of that object. — georgeawg, Oct 14 '19 at 20:40

AngularJS code data-binding through function is not working

1 Answers1