CODEWITHSUNDEEP
javascriptangularjshtmldata-binding
ridgeBoy
ridgeBoy

Reputation: 21

AngularJS 1.2.19 two-way binding doesn't work

I'm learning MEAN and now I have an issue with the front view which is made with AngularJS JavaScript v.1.2.19.

This is my index.html

<!DOCTYPE html>
<html ng-app="loc8rApp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body ng-view>
    <!--ng-view directive now sits in body tag so that we can control full page in Angular-->
    <!--script src="/angular/angular.min.js"></script-->
    <script src="/angular/angular.js"></script>
    <script src="/lib/angular-route.min.js"></script>
    <script src="/app.js"></script>
    <script src="/common/services/loc8rData.service.js"></script>
    <script src="/common/services/geolocation.service.js"></script>
    <script src="/common/directives/ratingStars/ratingStars.directive.js"></script>
    <script src="/common/directives/footerGeneric/footerGeneric.directive.js"></script>
    <script src="/common/directives/navigation/navigation.directive.js"></script>
    <script src="/common/directives/pageHeader/pageHeader.directive.js"></script>
    <script src="/common/filters/formatDistance.filter.js"></script>
    <script src="/home/home.controller.js"></script>
    <script src="/about/about.controller.js"></script>
    <script src="/javascripts/jquery-1.11.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/javascripts/validation.js"></script>
  </body>
</html>

This is my app.js in the client

    (function () {

       angular.module('loc8rApp', ['ngRoute']);

       function config ($routeProvider, $locationProvider) {
         $routeProvider
             .when('/', {
                 templateUrl: 'home/home.view.html',
                 controller: 'homeCtrl',
                 controllerAs: 'vm'
              })
             .when('/about',{
                 templateUrl: '/common/views/genericText.view.html',
                 controller: 'aboutCtrl',
                 ControllerAs: 'vm'
              })
              .otherwise({redirectTo: '/'});

         $locationProvider.html5Mode(true);
      }

      angular
          .module('loc8rApp')
          .config(['$routeProvider', '$locationProvider', config]);
    })();

The first route (home/home.view.html view and homeCtrl) works perfectly when I invoke (the 2 way bindings are OK) and the custom directives also work fine.

But there is a problem in the second route (/common/views/genericText.view.html view and aboutCtrl). The custom directives are OK, but the values from the controller are not shown.

I have tried several tests:

  1. Place both the HTML file and the controller *.js file in the same directory.

  2. Showing several messages from the controller in the browser's console and add personalized comments in the html (to check that both files are requested and executed properly)

  3. Inspecting the HTML (using Chrome dev tools) the view and check that the angular vars are empty or w/o any value.

All of them without success.

I use 3 custom directives (a navigation bar, a page header, and a footer) and they are rendered properly in the HTML. But the values created in the controller are not rendered, so the body is empty.

These are my problematic files:

about.controller.js

    (function () {

        angular
         .module('loc8rApp')
         .controller('aboutCtrl', aboutCtrl);

        function aboutCtrl() {

           var vm = this;

           console.log('debug'); //shown console

           vm.pageHeader = {
               title: 'test',
               strapline: 'this is the strapline'
           };

           vm.main = {
               content: "this is the content"
           };

           vm.yeah = "this is for testing";

           console.log(vm.pageHeader.title); //shown at console
           console.log(vm.main.content); //shown console
           console.log(vm.yeah); //shown console
        }
    })();

And the view file

    <!-- custom directive -->
    <navigation></navigation>



    <div class="container">
       <!-- custom directive -->
       <page-header content="vm.pageHeader"></page-header>

       <div class="row">
          <div class="col-xs-12 col-sm-8"> 
             <div>{{ vm.main.content }}</div>
             <div>{{ vm.yeah }}</div>
          </div>
       </div>

       <!-- custom directive -->
       <footer-generic></footer-generic>
    </div>

I haven't included the directives sources because they are shown correctly in the view. The only problems are the bound values in the controller.

Perhaps there is a problem with the controller as syntax or there is a problem with the context, but I am a newbie so I can't find any clue about what is happening.

Upvotes: 2

Views: 163

Answers (1)

ed&#39;
ed&#39;

Reputation: 1895

There is a capital C in your ControllerAs on your second route, and keys are case sensitive in javascript.

Upvotes: 1

Related Questions