JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<div ng-controller="TokenCtlr">
Token name: <span ng-bind="tokenName"></span>
</div>
<snippet>
<div class="CodeRay">
<div class="code"><pre><span class="line-numbers"> 1</span><span class="keyword">class</span> <span class="class">Greeter</span>
<span class="line-numbers"> 2</span> <span class="keyword">def</span> <span class="function">initialize</span>(greeting)
<span class="line-numbers"> 3</span> <span class="instance-variable">@greeting</span> = greeting
<span class="line-numbers"> 4</span> <span class="keyword">end</span>
<span class="line-numbers"> 5</span>
<span class="line-numbers"> 6</span> <span class="keyword">def</span> <span class="function">greet</span>
<span class="line-numbers"> 7</span> puts greeting
<span class="line-numbers"> 8</span> <span class="keyword">end</span>
<span class="line-numbers"> 9</span><span class="keyword">end</span>
</pre></div>
</div>
</snippet>
JavaScript
var tokenApp = angular.module('tokenApp', []);
tokenApp.factory('tokenService', function($rootScope) {
var tokenService = {};
tokenService.tokenName = 'global';
tokenService.getToken = function() {
return tokenService.tokenName;
};
tokenService.setToken = function(name) {
tokenService.tokenName = name;
$rootScope.$broadcast('changeToken');
};
return tokenService;
});
tokenApp.directive('snippet', function() {
var snippet = {};
snippet.restrict = 'E';
snippet.controller = function($scope, $element, tokenService) {
$element.bind('click', function(e) {
var node = e.target;
var tokenName = 'global';
if (/span/i.test(node.nodeName)) {
tokenName = angular.element(node).attr('class');
}
tokenService.setToken(tokenName);
});
};
snippet.controller.$inject = ['$scope', '$element', 'tokenService'];
return snippet;
});
function TokenCtlr($scope, tokenService) {
var self = this;
$scope.tokenName = 'global';
$scope.$on('changeToken', function(listener) {
console.log(tokenService.tokenName);
$scope.tokenName = tokenService.tokenName;
listener.currentScope.$apply();
});
}
TokenCtlr.$inject = ['$scope', 'tokenService'];