1

I have an AngularJS test page with a "Refresh" link which calls a function, which, in return, updates the model "customer.name"

However, the "Refresh" click still doesn't change the {{customer.name}} in the view and I don't understand why.

Here is the content of my application.

index.html

<!doctype html>
  <head>
    <title>Test</title>
</head>
  <body ng-app="roaMobileNgApp">


    <script src="scripts/angular.js"></script>

    <script src="scripts/angular-ui.js"></script>
    <link rel="stylesheet" href="scripts/angular-ui.css">

    <div class="container" ng-view=""></div>

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>


</body>
</html>

app.js

'use strict';

angular.module('roaMobileNgApp', ['ui'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

main.js

'use strict';

angular.module('roaMobileNgApp')
  .controller('MainCtrl', function ($scope) {


    $scope.customer = {name: '',
                      id: 0};



    $scope.getDetails = function() {
        $scope.customer.name = 'Test';
    };

  });

main.html 

    <a href="#" ng-click="getDetails()">Refresh</a>
    <p><input type="text" ng-model="customer.name"> {{ customer.name }} </p>

</div>
Drew McGowen
  • 11,471
  • 1
  • 31
  • 57
Marius Mutu
  • 65
  • 1
  • 2
  • 5

1 Answers1

4

This is probably because you are changing the address by clicking:

<a href="#" ng-click="getDetails()">Refresh</a>

This forces angular to re-render the html as well as the controller.

Change it as below:

<a href="javascript:void(0)" ng-click="getDetails()">Refresh</a>
AlwaysALearner
  • 43,759
  • 9
  • 96
  • 78
  • 2
    Or much better, leave the `href` attribute empty: http://stackoverflow.com/questions/18080715/angularjs-href-causes-location-address-to-change-can-we-avoid/18081454#18081454 – Blackhole Aug 08 '13 at 13:49
  • Thank you all. It worked with href="", href="javascript:void(0)" and with a button. – Marius Mutu Aug 09 '13 at 06:47