Service Event Broadcast to Ctrls

by jamey777

HTML

<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<div ng-controller="HelloCtrl">
    <p>{{fromService}}</p>
    <button ng-click="getFullName()">Get Full Name</button>
    <button ng-click="broadcastFullName()">Broadcast Full Name</button>
    <p class="fred" ng-class="(getFull == 'nothing' && 'small' || 'big')">{{getFull}}</p>
    <p>Fave color: {{prefs.faveColor}}</p>
    <p>{{prefs.history.length}} items in history:</p>
</div>
<br />
<div ng-controller="GoodbyeCtrl">
    <p>{{fromService}}</p>
    <input type='text' ng-change='changeName()' ng-model='firstName'>
    <input type='text' ng-change='changeName()' ng-model='lastName'>
    <p class="big">{{getFull}}</p>
    <p>Fave color: {{prefs.faveColor}}</p>
    <p>{{prefs.history.length}} items in history:</p>
</div>
<br><br>
<div ng-controller="PrefsCtrl">
    <p>Preferences:</p>
    <input type='text' ng-change='changeFaveColor()' ng-model='prefs.faveColor'>
    <button ng-click="checkService ()">Check Service faveColor</button>
    <br>
    <p>{{prefs.history.length}} items in history:</p>
    <span ng-repeat="item in prefs.history">
        {{$index + 1}}. {{item}} <span ng-hide="$last">|</span>     
    </span><br>
    <input type='text' ng-model='newHistoryItem'>
    <button ng-click="addToHistory()">Add to history</button>
    <br>
    <button ng-click="changeTest()">test change color</button>
</div>

CSS

.big{
   font-size: 2em;;
}
.normal{
   font-size: 1em;
}
.small{
   font-size: .5em;
}

JavaScript

var app = angular.module('myApp', []);
//http://www.movable-type.co.uk/scripts/latlong.html
app.service('testService', function($rootScope) {
    //object example
    this.prefs = {
        faveColor: "Green",
        rememberMe: true,
        history: ['history one', 'history two', 'history three'],
        popIt: function() {
            alert('fave color: ' + this.faveColor);
        }
    };
    this.changeTest = function() {
        this.prefs.faveColor = "Mello Yellow";
    };
    //generic method example
    this.sayHello = function(text) {
        return "Service says \"Hello " + text + "\"";
    };
    //generic method example
    this.sayGoodbye = function(text) {
        return "Service says \"Goodbye " + text + "\"";
    };
    //first name property
    this.firstName = "Jamey";
    //last name property
    this.lastName = "Wright";
    //full name property method
    this.fullName = function() {
        return this.firstName + ' ' + this.lastName;
    };
    //publish a method for controllers to listen for
    this.broadcastName = function() {
        $rootScope.$broadcast("broadcastFullName ", {
            fullName: this.fullName()
        });
    };
    //change the name (will also broadcast the event to the listening controllers)
    this.changeName = function(first, last) {
        this.firstName = first;
        this.lastName = last;
        $rootScope.$broadcast("broadcastFullName ", {
            fullName: this.fullName()
        });
    };
});

function HelloCtrl($scope, testService) {
    //object from service
    $scope.prefs = testService.prefs;
    //just an example of a generic method on a service
    $scope.fromService = testService.sayHello("World");
    //init local scope fullname to nothing
    $scope.getFull = 'nothing';
    //directly call the service and get the full name (no broadcast)
    $scope.getFullName = function() {
        $scope.getFull = testService.fullName();
    };
    //call the service method that fires off the...