An approach to use jQuery Plugins with AngularJS

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

by ncapito

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>
<div ng-app="Knob" ng-controller="myCtrl">
    <pre class="prettyprint linemus" html="dom" ng-show="dom"></pre>
    <pre class="prettyprint linemus" html="dom2"  ng-show="dom2"></pre>
</div>

JavaScript

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope,HTMLModel) {
    HTMLModel.get(1000).then(function(data){
       $scope.dom = data;
        $scope.dom2 = {html: '&lt;!DOCTYPE html&gt;&lt;html lang="en2"&gt;&lt;/html&gt;'}
    });
})

App.directive('prettyprint', function() {
    return {
        restrict: 'C',
        scope: {
            data: '=html'
        },
        link: function postLink(scope, element, attrs) {
            scope.$watch('data', function(newVal, oldVal){
                
                if(newVal){
                 element.html(prettyPrintOne(newVal.html));
                }
                
            });
           
        }
    };
});


App.service('HTMLModel', function($q, $timeout, $log) {
    this.model = {
        html:'&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;/html&gt;'
    };
    this.get = function(time){
       var promise = $q.defer();
        var that = this;
        $log.info("request");
        $timeout(function(){
            $log.info("resolve");
            promise.resolve(that.model);
        }, time);
        return promise.promise;
    }
});