AngularJS environment

by Daniel Shell

HTML

<div ng-app="MyApp">
    
    <radio-environment environment="environment" change-environment="environmentChange()"></radio-environment>

    <div style="margin-top: 15px;">
        App Environment: {{ environment }}
    </div>
    
</div>

JavaScript

angular.module('MyApp', [])

.controller('mainController', ['$scope'],
    function(scope) {
                
        scope.environmentChange = function() {
            console.log('Changing to environment ' + scope.environment);
        };
                
        scope.watch("environment", function(newValue, oldValue) {
            scope.environmentChange();
        });
                
    })

.directive('radioEnvironment', function() {
    return {
        scope: { 
            environment: '='   // two-way binding
        },
        restrict: 'E',
        replace: true,
        template: '<div>'
                    + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>'
                    + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>'
        + '<div>Directive environment: {{ environment }}</div>'
        + '</div>',
        link: function(scope, element, attributes) {
            
            scope.changeEnvironment = function(choiceID) {
                console.log('SELECTED environment ' + choiceID);
                scope.environment = choiceID;
                console.log('directive environment = ' + scope.environment);
            };
            
        }
    };
});