Angular SPA databinding

Question

My angular SPA databinding is not updating automatically. Hoping you can tell me why.

-

This is my JS file:

var app = angular.module('SDMApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/para', {
            templateUrl: 'view/ParaView.html',
            controller: 'MainController'
        });
});

app.controller('MainController', function($scope) {
    $scope.CurrentlyShowing = "Hello";
});

And my html file:

<!DOCTYPE html>
<html ng-app="SDMApp">
<head lang="en">
    <meta charset="UTF-8">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.min.js"></script>
    <script src="Angular.js"></script>
    <title></title>
</head>
<body ng-controller="MainController">
    <div ng-view></div>
    <input ng-model='CurrentlyShowing'>
</body>
</html>

And my template:

<p>{{ CurrentlyShowing }}</p>

-

Although it shows "Hello" like it should initially, when I write in my input element (the html input element in the body), the paragraph from the template doesn't update. Here is a plunker of this scenario: http://plnkr.co/edit/ALEDabL7lmKKgFmGzCce?p=preview .

When I replace the ng-view div with my paragraph from the template, and write in my input element, it updates fine. Here is a plunker of this scenario: http://plnkr.co/edit/TniFrGYBnNQLz8A3BfQ5?p=preview .

Could anyone tell me what is wrong?

Dan Mindru · Accepted Answer · 2015-03-13T12:00:54.257

1

You are specifying the controller twice

app.config(function ($routeProvider) {
    $routeProvider
        .when('/para', {
            templateUrl: 'view/ParaView.html',
            controller: 'MainController' //1st time
        });
});

Second time here <body ng-controller="MainController"> Remove it from your config block and it will work.

app.config(function ($routeProvider) {
    $routeProvider
        .when('/para', {
            templateUrl: 'view/ParaView.html'
        });
});

If you want to define the controller in the route, you need to include the in the template, otherwise it won't be in the controller scope.

I recommend doing it this way: http://plnkr.co/edit/QKA5aKSfe1Z3D8yO7Vkn?p=preview

edited Mar 13 '15 at 12:00

answered Mar 13 '15 at 11:55

Dan Mindru

5,986
4
28
42

1

(Updated Plunker link). If you are wondering why you should use the Controller As syntax, take a look here: https://github.com/johnpapa/angular-styleguide#controlleras-view-syntax – Dan Mindru Mar 13 '15 at 12:03
Thank you, I will definitely check it out :) I have a question though. Why does something like this not work: http://plnkr.co/edit/Ora7Eq2utAOiTBDy75cE?p=preview . I mean, the elements have the same controller, so why does the automatic databinding not work? – MyrionSC2 Mar 13 '15 at 13:09
1

Well controllers are NOT singletons: which means that you actually create 2 instances of 'MainController': one for the input and one for ng-view. See this question for a in-depth explanation: http://stackoverflow.com/a/16096598/3263450 – Dan Mindru Mar 13 '15 at 16:58
1

Check out this example: http://plnkr.co/edit/1vtlV7aulkkG6ls6eyde => I am using a counter on the rootScope to show you that there are in fact 2 isolated scopes, therefore the value 'CurrentlyShowing' inside ng-view is different from the input value (they do not share the same controller) – Dan Mindru Mar 13 '15 at 17:08
1

Okay, not singleton. Everything makes more sense now :) Thank you very much :) – MyrionSC2 Mar 14 '15 at 20:01

Angular SPA databinding

1 Answers1