An approach to use jQuery Plugins with AngularJS

http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

by David Raynes

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<div ng-app="prettifyTest" ng-controller="myCtrl">
    <input type="text" ng-model="organization.message" />
    <prettify target="organization"><pre><code class="prettyprint">console.log('{{target.message}}');
            </code>
        </pre>
    </prettify>
</div>

JavaScript

var App = angular.module('prettifyTest', []);
App.controller('myCtrl', function ($scope) {
    $scope.organization = {
        message: 'Hello, world!'
    };
});

App.directive('prettify', ['$compile', function ($compile) {
    var templateFn;
    return {
        restrict: 'E',
        scope: {
            target: '='
        },
        link: function (scope, element, attrs) {
            if (!templateFn) {
                var template = element.html();
                templateFn = $compile(template);
            }
            scope.$watch('target', function (newVal, oldVal) {
                debugger;
                scope.target = newVal;
                var compiled = templateFn(scope);
                element.html('');
                element.append(compiled);
                var html = element.html();
                var prettified = prettyPrintOne(html);
                element.html(prettified);
            }, true);
        }
    };
}]);