Angular: Editable directive v2

with repeater

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">My CSS was modified by jQuery from an Angular Directive</h1>


<h2 id="jqtarg2">Mine too...</h2>

<!-- angular scope starts here -->
<div ng-app="my">
    <div ng-controller="MyCtrl">
        <ng-form>
            <div ng-repeat="attrObj in customCss">
                <label ng-bind="attrObj.name"></label>
                <input hijack="" ng-model="attrObj.val" ng-change="updateStyle(attrObj)"></input>
            </div>
            <button ng-click="showChanges()">Submit</button>
        </ng-form>
        <hr/><label>The JSON data:</label>{{customCss}}</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;
}
.ng-scope>.ng-scope {
    border-color:turquoise;
}
.ng-scope > .ng-scope .ng-scope {
    border-color:blue;
}

JavaScript

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

 module.directive('hijack', function () {
         
     return {
         restrict: 'A',  
         link: function (scope, element, attribs) {
             var obj = scope.attrObj;
             scope.updateStyle(obj);
         }
     }
 });

 function MyCtrl($scope) {
     $scope.customCss = [{
         "name": "H1 background",
             "target": "#jqtarg1",
             "attr": "background-color",
             "val": "pink"
     }, {
         "name": "H1 Color",
             "target": "#jqtarg1",
             "attr": "color",
             "val": "green"
     }, {
         "name": "H2 background",
             "target": "#jqtarg2",
             "attr": "background-color",
             "val": "yellow"
     }];
     $scope.showChanges = function () {
         alert("...and upload to server");
     };
     $scope.updateStyle = function(obj){     
         $(obj.target).css(obj.attr,obj.val); 
     }
 };