0

I'm new to angular and am trying to accomplish a very simple task, which doesn't seem to be that simple in angular.

I am having some data (just a variable named var1 for simplicity), that I'm modifying in one area of the webpage while I want to display it in another area of the webpage.

<body ng-app="app">
    <div id="div1" ng-controller="TestCtrl">
        <input type="text" ng-model="var1" /> Var1: {{ var1}}
    </div>
    <br />
    <div id="div2" ng-controller="TestCtrl">
        Var1: {{ var1 }}
    </div>

 //..

And I am initializing the variable in the corresponding controller:

 angular.module('app', [])
    .controller('TestCtrl', function($rootScope){
        $rootScope.var1 = 1;
        $rootScope.var2 = 2;

        this.updateValues = function() {
            srv.updateValues($rootScope.var1, $rootScope.var2);
        };

    });

Now, as you probably know, the second time I attach the ng-controller to a div, I get a completely new instance of the controller which knows nothing about the first instance where I actually modified the data.

So how can I access the var1 of the first controller, in another area of the webpage?

https://plnkr.co/edit/XgIWFW89tavnjOW09TBp?p=preview

  • One thing which comes to my mind, would be to attach the TestCtrl to the body so that basically the whole website has only one instance of the TestCtrl. Is this a common approach? I already feel that 90% of my controllers will be attached to the body tag.

  • I already read the suggestion of using services and to be honest, I don't really see how such a service should be implemented for such a simple scenario.

  • Is there another solution?

user66875
  • 2,772
  • 3
  • 29
  • 55
  • 1
    you may want to re-word your question so that it doesn't get flagged as a rant in disguise. You haven't asked a question as much as made a statement about why you don't like the two potential solutions provided by the framework design. – Claies Feb 01 '16 at 08:41
  • that being said, in my opinion, you should never use the same controller multiple times on the same page, it only serves to create confusion. There is nothing inherently wrong with having a controller that covers the entire body of the document; in fact, that's a very common approach. The reason that services will be recommended as an alternative is because services are singletons. – Claies Feb 01 '16 at 08:44
  • Thank you! Is there any popular angularjs forum/site which allows discussion? Because for topics like this, there is no right answer if you ask me, but several ways which should be discussed. :( – user66875 Feb 01 '16 at 09:22
  • there is a chat service built in to the SO site to encourage discussion, both in private and for popular topics. There is an Angular chat room, as well as a JavaScript chat room. The JavaScript chatroom in particular is very active. – Claies Feb 01 '16 at 09:51

1 Answers1

1

OK, this is related to Miško's saying:

"..if you use ng-model there has to be a dot somewhere. If you don't have a dot, you're doing it wrong.."

In short, when you are initializing var1 in the second controller, you are creating your own scope (even when you're using $rootScope).

Instead of accessing $rootScope directly:

$rootScop.var1 = 1;

Try to use an object:

$rootScope.dataObj = {var1: 1};

https://plnkr.co/edit/oVB16H0PBLFx3PyLhuRN?p=preview

For further reading:

Why don't the AngularJS docs use a dot in the model directive?

http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

https://thinkster.io/egghead/the-dot

Community
  • 1
  • 1
ronapelbaum
  • 1,617
  • 14
  • 19