iamgoangle/test.html

## test.html
<!DOCTYPE html>

<html ng-app="testApp">
    <head>
        <title>01_simple_directive.html</title>

        <script type="application/javascript" src="angular.min.js"></script>
        <script>
            var testApp = angular.module('testApp', []);

            testApp.controller('testCtrl', ['$scope', function($scope){
                $scope.background = 'F00';
                $scope.foreground = '000';
            }]);

            testApp.directive('colourPicker', function(){
                var tpl = "<div> \
                     R <select ng-model='red'> \
                         <option value='F'>Lots</option> \
                         <option value='A'>Some</option> \
                         <option value='0'>None</option> \
                     </select> \
                     G <select ng-model='green'> \
                         <option value='F'>Lots</option> \
                         <option value='A'>Some</option> \
                         <option value='0'>None</option> \
                     </select> \
                     B <select ng-model='blue'> \
                         <option value='F'>Lots</option> \
                         <option value='A'>Some</option> \
                         <option value='0'>None</option> \
                     </select> \
                 </div>";

                return {
                    restrict: 'E',
                    template: tpl,
                    require: 'ngModel',
                    scope: {
                        ngModel: '='
                    },
                    link: function(scope, iElement, iAttrs, ngModelCtrl){
                        // Formatters change how model values will appear in the view.
                        ngModelCtrl.$formatters.push(function(modelValue) {
                            var colours = modelValue.split('');
                            return {
                                red: colours[0],
                                green: colours[1],
                                blue: colours[2]
                            };
                        });

                        // The $render() method is invoked in the following situations:
                        // The value referenced by ng-model is changed programmatically
                        // and both the $modelValue and the $viewValue are different from last time.

                        /*
                            The $render function takes the values that are on the $viewValue of ngModelCtrl
                            and puts them onto the local scope. In other words,

                            it takes the $viewValue and renders it to the screen.
                            This means that in the directive’s UI we have access to red, green and blue.
                        */
                        ngModelCtrl.$render = function() {
                            scope.red   = ngModelCtrl.$viewValue.red;
                            scope.green = ngModelCtrl.$viewValue.green;
                            scope.blue  = ngModelCtrl.$viewValue.blue;
                        };

                        // set view value
                        scope.$watch('red + green + blue', function() {
                            ngModelCtrl.$setViewValue({
                                red: scope.red,
                                green: scope.green,
                                blue: scope.blue
                            });
                        });

                        // Parsers change how view values will be saved in the model.
                        ngModelCtrl.$parsers.push(function(viewValue) {
                            return '#' + [viewValue.red, viewValue.green, viewValue.blue].join('');
                        });
                    }
                }
            });
        </script>
    </head>
    <body ng-controller="testCtrl">
        <input ng-model="background">
        <colour-picker ng-model="background"></colour-picker>
    </body>
</html>
	<!DOCTYPE html>

	<html ng-app="testApp">
	<head>
	<title>01_simple_directive.html</title>

	<script type="application/javascript" src="angular.min.js"></script>
	<script>
	var testApp = angular.module('testApp', []);

	testApp.controller('testCtrl', ['$scope', function($scope){
	$scope.background = 'F00';
	$scope.foreground = '000';
	}]);

	testApp.directive('colourPicker', function(){
	var tpl = "<div> \
	R <select ng-model='red'> \
	<option value='F'>Lots</option> \
	<option value='A'>Some</option> \
	<option value='0'>None</option> \
	</select> \
	G <select ng-model='green'> \
	<option value='F'>Lots</option> \
	<option value='A'>Some</option> \
	<option value='0'>None</option> \
	</select> \
	B <select ng-model='blue'> \
	<option value='F'>Lots</option> \
	<option value='A'>Some</option> \
	<option value='0'>None</option> \
	</select> \
	</div>";

	return {
	restrict: 'E',
	template: tpl,
	require: 'ngModel',
	scope: {
	ngModel: '='
	},
	link: function(scope, iElement, iAttrs, ngModelCtrl){
	// Formatters change how model values will appear in the view.
	ngModelCtrl.$formatters.push(function(modelValue) {
	var colours = modelValue.split('');
	return {
	red: colours[0],
	green: colours[1],
	blue: colours[2]
	};
	});

	// The $render() method is invoked in the following situations:
	// The value referenced by ng-model is changed programmatically
	// and both the $modelValue and the $viewValue are different from last time.

	/*
	The $render function takes the values that are on the $viewValue of ngModelCtrl
	and puts them onto the local scope. In other words,

	it takes the $viewValue and renders it to the screen.
	This means that in the directive’s UI we have access to red, green and blue.
	*/
	ngModelCtrl.$render = function() {
	scope.red = ngModelCtrl.$viewValue.red;
	scope.green = ngModelCtrl.$viewValue.green;
	scope.blue = ngModelCtrl.$viewValue.blue;
	};

	// set view value
	scope.$watch('red + green + blue', function() {
	ngModelCtrl.$setViewValue({
	red: scope.red,
	green: scope.green,
	blue: scope.blue
	});
	});

	// Parsers change how view values will be saved in the model.
	ngModelCtrl.$parsers.push(function(viewValue) {
	return '#' + [viewValue.red, viewValue.green, viewValue.blue].join('');
	});
	}
	}
	});
	</script>
	</head>
	<body ng-controller="testCtrl">
	<input ng-model="background">
	<colour-picker ng-model="background"></colour-picker>
	</body>
	</html>