sharing a var between views/controllers

Question

I know this question has been asked 100s of times but i have yet to succeed in implementing this after reading countless of threads... shame on me.

I know this is a lot of code (sorry). But I just can't find what I'm doing wrong, So to the problem I want to add something to the list in pat1 then click over to pat2 and see the same list.

Routing;

var routeApp = angular.module('routeApp', ['ngRoute', 'rootMod']);

routeApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/pat1', {
        templateUrl: 'partials/pat1.html',
        controller: 'pageOneCont'
    }).
    when('/pat2', {
        templateUrl: 'partials/pat2.html',
        controller: 'pageTwoCont'
    }).
    otherwise({
        redirectTo: '/pat1'
    });
}]);

Controllers & Service:

    var rootMod = angular.module('rootMod', []);


rootMod.controller('pageOneCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        aService.registerObserverCallback(updateFoo);
        //service now in control of updating foo
    };
}]);

rootMod.controller('pageTwoCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        aService.registerObserverCallback(updateFoo);
        //service now in control of updating foo
    };
}]);

/* Service */
rootMod.factory('serv', [ function () {

    var observerCallbacks = [];

    //register an observer
    this.registerObserverCallback = function(callback){
        observerCallbacks.push(callback);
    };

    //call this when you know 'foo' has been changed
    var notifyObservers = function(){
        angular.forEach(observerCallbacks, function(callback){
            callback();
        });
    };
}]);

INDEX.html

<!doctype html>
<html lang="en" ng-app="routeApp">
<head>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</head>
<body>
    <li><a href="#pat1"> ONE </a></li>
    <li><a href="#pat2"> TWO </a></li>
</body>
<!-- SinglePage -->
<div ng-view></div>
</html>

PAT1.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Test</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>

<div ><!--ng-app="myModule" ng-controller="ContactController">-->
  <h1> ONE </h1>
  <button ng-click="handleClick"> BROADCAST </button>
  <div ng-repeat="item in foo">{{ item }}</div> 
</div>
</html>

PAT2.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Test</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>

<div> <!--ng-app="myModule" ng-controller="ContactController">-->
  <h1> TWO </h1>
  <div ng-repeat="item in foo">{{ item }}</div>
</div>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 12:21

JS

Your service is injected as serv in your controllers but you call aService. Use serv instead.
You should use rootMod.service() instead of rootMod.factory() since you are using this and not returning anything in your service function (see this for the difference between factories and services).
There is no serv.foo property. You have to add this.foo = /** something **/; to your service function.

So this should work:

var rootMod = angular.module('rootMod', []);


rootMod.controller('pageOneCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        serv.registerObserverCallback(updateFoo);
        // service now in control of updating foo
    };
}]);

rootMod.controller('pageTwoCont', [ 'serv', '$scope', function (serv, $scope) {
    'use strict';

    // Your controller implementation goes here ...
    $scope.handleClick = function ($scope, serv){
        var updateFoo = function(){
            $scope.foo = serv.foo;
        };

        serv.registerObserverCallback(updateFoo);
        // service now in control of updating foo
    };
}]);

/* Service */

rootMod.service('serv', [ function () {

    var observerCallbacks = [];

    // call this when you know 'foo' has been changed
    var notifyObservers = function(){
        angular.forEach(observerCallbacks, function(callback){
            callback();
        });
    };

    // initialize foo here
    this.foo = '';

    // register an observer
    this.registerObserverCallback = function(callback){
        observerCallbacks.push(callback);
    };
}]);

HTML

You put the ng-view container outside of the body. It has to be inside. Also the path to a view starts with #/ so you have to change your links.

<!doctype html>
<html lang="en" ng-app="routeApp">
    <head>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <li><a href="#/pat1"> ONE </a></li>
        <li><a href="#/pat2"> TWO </a></li>
        <!-- SinglePage -->
        <div ng-view></div>
    </body>
</html>

Each view only needs the content that should be placed inside the ng-view container. So you mustn't make a complete HTML document.

pat1.html

<h1> ONE </h1>
<button ng-click="handleClick"> BROADCAST </button>
<div ng-repeat="item in foo">{{ item }}</div>

pat2.html

<h1> TWO </h1>
<div ng-repeat="item in foo">{{ item }}</div>

Thanks for the input! But i still dont get how i ge the context of the "serv" foo on both pages. With these changes it just resets the foo array when i switch page. Because im just calling {{ foo }}in the html... — SomeRandomName, Dec 09 '13 at 16:05
See my update. Maybe you could do a small [Fiddle](http://jsfiddle.net/) for this? And what do you intend to do in your application in the first place? — Mouagip, Dec 09 '13 at 16:22
Just trying to understand how it woorks, not planning to do annything "real" just yet :P , thanks for the help... but even with these cahnges i get nothing in my service. i know i dont add annything to it annyhwere. But i can't understand how i add stuff to this shared list... — SomeRandomName, Dec 10 '13 at 08:10
Look at [this example](http://jsfiddle.net/xwP3w/). There are two controllers that share a service similar to yours. If you click the button of `Ctrl1` an element is appended to the list of the service. `Ctrl2` binds the reference of the list array to its scope and builds a `ul` out of it. Since the array is shared by reference both controllers work with the same object and the `ul` us updated immediately. — Mouagip, Dec 10 '13 at 09:43
The porblem was me resetting the variable i when switching view. So it made duplicates when i was set to 0 when switching from view 1 to view two via routing. I moved the variable to the Service and made get / set function and used that for the counter. Ty for your help :) — SomeRandomName, Dec 10 '13 at 12:02

sharing a var between views/controllers

1 Answers1

JS

HTML