CODEWITHSUNDEEP
angularjscontrollernested
singe3
singe3

Reputation: 2105

Angularjs controller nesting

I'm new to angular, I've tried some testing pattern and it's ok with the $scope variable but I can't make it work for a simple controller nesting. (and avoid using the $scope variable, instead I want to use "this")

Here is my sample HTML and javascript : 

<!doctype html>
<html ng-app="appTest">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="FirstController as first">
      <div>
        First is {{first.text}}
      </div>
      <div ng-controller="SecondController as second">
        Second is {{second.text}}
      </div>
    </div>
    <script>
    var app = angular.module("appTest",[]);


    function printFirst() {
      this.text = "first"
    }

    function printSecond() {
      this.text = "second";
    }

    app.controller("FirstController",[printFirst]);
    app.controller("SecondController",[printSecond]);
    </script>
  </body>
</html>

In the output html the angular variables inside curly brackets are not replaced and I don't know what's going on. I've tried to install Angular Batarang for debugging but the scope console is empty.

Obviously it's a silly mistake but I don't see where I'm wrong

Upvotes: 3

Views: 5669

Answers (2)

singe3
singe3

Reputation: 2105

Ok, the answer has nothing to do with my code, I was just using a too old version of Angularjs (1.0.8). I moved to the last version 1.3.4 and it works fine.

Upvotes: 1

Simon Zambrovski
Simon Zambrovski

Reputation: 756

Access the variable using $scope.text please instead of this.text.

Upvotes: 0

Related Questions