Angular view/edit switch

by graphicsxp

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.2/angular.js"></script>
<div ng-app="myApp" ng-controller="FocusCtrl">
    <div ng-switch on="state">
        <div ng-switch-when="view">
            Field value: {{field}}<br>
            <button ng-click="startEdit()">Switch edit</button>
        </div>
        <div ng-switch-when="edit">
            <form>
                <input id="test" type="text" ng-model="field" my-focus><br>
                <button ng-click="startView()">Switch view</button>
            </form>
        </div>
    </div>
</div>

JavaScript

angular.module('myApp', []).directive('myFocus', function() {
    return {
        link: function(scope, element) {
            console.log('here');
            element.focus();
        }
    };
});

function FocusCtrl($scope) {
    $scope.field = 'test';
    $scope.state = 'view';
    $scope.startEdit = function () {
        $scope.state = 'edit';
    }
    $scope.startView = function () { 
        $scope.state = 'view';
    }
    $scope.init = function () { // init form for view
        document.getElementById('test').focus();
    }
}