Angular: Editable directive v1

http://angularjs.org/

by johnwun

HTML

<script src="http://code.angularjs.org/angular-1.0.0.js"></script>
<!-- these tags are outside of the Angular scope..-->
<h1 id="jqtarg1">H1 Modified by jquery</h1>
<h2 id="jqtarg2">H2 Modified by jquery</h2>

<!-- angular scope starts here -->
<div ng-app="my">
    <div ng-controller="MyCtrl">
        <ng-form>
            <div >
                <label ng-bind="customCss.h1Bg.name"></label>
                <input hijack ng-model="customCss.h1Bg.val"></input>
            </div>
            <div>
                <label ng-bind="customCss.h1Color.name"></label>
                <input hijack ng-model="customCss.h1Color.val"></input>
            </div>
            <div>
                <label ng-bind="customCss.h2Bg.name"></label>
                <input hijack ng-model="customCss.h2Bg.val"></input>
            </div>
            <button ng-click="showChanges()">Submit</button>
        </ng-form>
        <hr/>
        {{customCss}}
        <hr/>{{output}}</div>
</div>

CSS

body{
    padding:5px;
}
h1, h2 {
    text-align:center;
}
h1{
    font-size:14px;
}
label{
    display:block;
    margin-top:9px;
    font-family:arial;
    font-size:10px;
    color:#555;
}
h2{
    font-size:11px;
}
.ng-scope {
    border:1px dotted red;
    margin:4px;
}

JavaScript

var module = angular.module("my", []);

 module.directive('hijack', function () {
     return {
         restrict: 'A',  
         link: function (scope, element, attribs) {      
             var modArr = attribs.ngModel.split(".");
             var mod = scope[modArr[0]][modArr[1]]; 
            scope.$watch(attribs.ngModel, function () { 
                 $(mod.id).css(mod.attr,mod.val); 
            });
         }
     }
 });

 function MyCtrl($scope) {
     $scope.customCss = {
         h1Bg:{
         "name":"H1 background",
         "id": "#jqtarg1",
         "attr": "background-color",
         "val": "pink"
         },
         h1Color:{
         "name":"H1 Color",
         "id": "#jqtarg1",
         "attr": "color",
         "val": "green"
         },
         h2Bg:{
         "name":"H2 background",
         "id": "#jqtarg2",
         "attr": "background-color",
         "val": "yellow"
         }
     };
         $scope.showChanges = function(){
             $scope.output= "This will upload json to server.";
     };
 };