CODEWITHSUNDEEP
angularjsbind
Marius Mutu
Marius Mutu

Reputation: 65

AngularJS data binding not working

I wrote some simplified code on http://jsfiddle.net/gsche/1/

When I click the "Refresh" link, the "customer.name" model doesn't update the view.

I wrote the code on my local computer and debugged it with Batarang in Chrome.

The console doesn't show any errors. The Model page in Batarang shows the customer name changing on the right, associated with an old scope id, but the id's of the $scopes also change.

Can anyone point me in the right direction?

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


function MainCtrl($scope) {


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

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

    };

}

Update 1 08.08.2013 Thank you all (@EpokK, @Stewie, @Hippocrates). I undestand now the problem with jsfiddle, and the example works as it should.

However, in my test application, the {{customer.name}} binding works, but the "Refresh" click still doesn't change the {{customer.name}} in the view.

Here is the content of my application. I think it is the same as the jsfiddle example:

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

<div ng-controller="MainCtrl">

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

</div>

Upvotes: 5

Views: 37111

Answers (3)

EpokK
EpokK

Reputation: 38092

Check my solution, I have edit your JSFiddle: http://jsfiddle.net/gsche/10/

function MainCtrl($scope) {

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

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

}

Upvotes: 3

Hippocrates
Hippocrates

Reputation: 2540

It's just the way you loaded your scripts.

I like to load angular followed by my app.js containing controllers right at the end of the body:

...
    <script src="/assets/js/angular.min.js"></script>
    <script src="/assets/js/app.js"></script>
</body>

To get your fiddle working, all I did was change it from "onReady" to "in body" (It's the little dropdown near the top left.)

Check this out: http://jsfiddle.net/gsche/3/

onReady means your controller definition was wrapped in an onReady function by jsfiddle. By the time angular loaded and got to work, your controller was still undefined and angular had to go ahead and spit out the raw template.

Upvotes: 0

Stewie
Stewie

Reputation: 60396

Just select "No wrap - in " in fiddle options (because otherwise your demo won't work), and remove the $scope parameter from your Refresh function. You don't need to pass in $scope because the function itself is defined inside the $scope.

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

Upvotes: 2

Related Questions