Inline edit multiple elements

by Warwick Grigg

HTML

<html>
<head>
    <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
                
        <text-editor edit="off" editorid="{{editorId1}}" label="Text" ng-model="welcome1" ></text-editor>        
        <editor-controls foreditor="{{editorId1}}"></editor-controls>
        
        <br/>
        
        <text-editor edit="off" editorid="{{editorId2}}" label="Text"  ng-model="welcome2" ></text-editor>        
        <editor-controls foreditor="{{editorId2}}"></editor-controls>
        
    </div>    
</body>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope){
    
    $scope.welcome1 = "Hello";
    $scope.welcome2 = "Angular";
    
    $scope.editorId1 = "edit_1";
    $scope.editorId2 = "edit_2";

});

myApp.controller('EditorCtrl', function($scope, $element, $attrs, $compile){
    
    console.log($scope);
    
    $scope.$watch('edit', function(editMode){   

        $element.html('');                                        
        
        if(editMode == 'on'){                                    
            $element.append($compile($scope.editTempl)($scope));                        
        } else if(editMode == 'off'){                                    
            $element.append($compile($scope.displayTempl)($scope));                        
        }                                                                    
    });
    
    $scope.toggleMode = function(){
        $scope.edit = ($scope.edit == 'on') ? 'off' : 'on'; 
        return $scope.edit;            
    };    
});

myApp.directive('editorControls', function($compile){    
    
    var displayTempl = '<button ng-click="toggleEditMode()">edit</button>';   
    var editTempl = '<button ng-click="toggleEditMode()">save</button>';
    
    var ddo = {
        restrict: 'E',
        template: '<span></span>',
        replace: true,
        scope: {
            'foreditor': '@'
        },                                                
        link: function(scope, elem, attrs){
                
            scope.editMode = 'off';                     
                                           
            scope.toggleEditMode = function(){
                var directive = angular.element($(scope.foreditor)).scope();

                scope.editMode = directive.toggleMode();                    
            };
            
            scope.$watch('editMode', function(editMode){
                elem.html('');                                        
                
  ...