arsonus/alloyeditor-as-angular-directive-with-ng-model.html

## alloyeditor-as-angular-directive-with-ng-model.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using AlloyEditor as an Angular directive</title>
        <style type="text/css">
            .container {
                margin-left: 30px;
                margin-top: 30px;
            }
        </style>

        <link rel="stylesheet" type="text/css" href="liferay/dist/alloy-editor/assets/alloy-editor-ocean-min.css">

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

        <script type="text/javascript" src="liferay/dist/alloy-editor/alloy-editor-all.js"></script>

        <script type="text/javascript">
            var alloyEditorApp = angular.module('alloyEditorApp', []);

            alloyEditorApp.controller('alloyEditorController', ['$scope', function ($scope) {
                $scope.text = 'Lorem ipsum dolor sit amet';
            }]);

            alloyEditorApp.directive('alloyEditor', function() {
                return {
                    link: function(scope, el, attrs, ngModel) {
                        var alloyEditor = AlloyEditor.editable(attrs.id);

                        if (!ngModel) {
                            return;
                        }

                        var nativeEditor = alloyEditor.get('nativeEditor');

                        nativeEditor.on('paste', function() {
                            ngModel.$setViewValue(nativeEditor.getData());
                        });

                        ngModel.$render = function(value) {
                            nativeEditor.setData(ngModel.$viewValue);
                        };
                    },
                    restrict: 'A',
                    require: '?ngModel',
                    scope: {}
                };
            });
        </script>
    </head>
    <body ng-app="alloyEditorApp">
        <div class="container" ng-controller="alloyEditorController">
            <textarea alloy-editor id="angularAlloy" ng-model="text"></textarea>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Using AlloyEditor as an Angular directive</title>
	<style type="text/css">
	.container {
	margin-left: 30px;
	margin-top: 30px;
	}
	</style>

	<link rel="stylesheet" type="text/css" href="liferay/dist/alloy-editor/assets/alloy-editor-ocean-min.css">

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

	<script type="text/javascript" src="liferay/dist/alloy-editor/alloy-editor-all.js"></script>

	<script type="text/javascript">
	var alloyEditorApp = angular.module('alloyEditorApp', []);

	alloyEditorApp.controller('alloyEditorController', ['$scope', function ($scope) {
	$scope.text = 'Lorem ipsum dolor sit amet';
	}]);

	alloyEditorApp.directive('alloyEditor', function() {
	return {
	link: function(scope, el, attrs, ngModel) {
	var alloyEditor = AlloyEditor.editable(attrs.id);

	if (!ngModel) {
	return;
	}

	var nativeEditor = alloyEditor.get('nativeEditor');

	nativeEditor.on('paste', function() {
	ngModel.$setViewValue(nativeEditor.getData());
	});

	ngModel.$render = function(value) {
	nativeEditor.setData(ngModel.$viewValue);
	};
	},
	restrict: 'A',
	require: '?ngModel',
	scope: {}
	};
	});
	</script>
	</head>
	<body ng-app="alloyEditorApp">
	<div class="container" ng-controller="alloyEditorController">
	<textarea alloy-editor id="angularAlloy" ng-model="text"></textarea>
	</body>
	</html>