SO - 21421527

by Arun P Johny

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
{{message}}
<plain-text></plain-text>

JavaScript

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope) {

    $scope.message = "Welcome";
})

app.directive("plainText", function () {
    return {
        restrict: 'E',
        scope: {
            value: "@",
        },
        link: function (scope, element, attrs) {
            console.log('x')

            scope.view = true;

            element.bind("click", function () {
                scope.view = !scope.view;
                console.log(scope.view);

                if (!scope.$$phase && !scope.$root.$$phase) {
                    scope.$apply()
                }
            })

            scope.value = attrs.value;
        },
        template: '<div>\
<div>{{value}} - {{view}} - Click Me</div>\
	<div ng-show="view">\
		<input type="text" ng-model="value">\
		<br/>\
		<div class="btn btn-default" ng-click="save()">Save</div>\
		<div class="btn btn-default" ng-click="cancel()">Cancel</div>\
	</div>\
</div>'
    }
})