JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<a href="http://docs.angularjs.org/api/ng/service/$compile">http://docs.angularjs.org/api/ng/service/$compile</a>

<blockquote>
    <p>When there are multiple directives defined on a single DOM element, sometimes it is necessary to specify the order in which the directives are applied. The <code><span class="pln">priority</span></code> is used to sort the directives before their <code><span class="pln">compile</span></code> functions get called. Priority is defined as a number. Directives with greater numerical <code><span class="pln">priority</span></code> are compiled first. Pre-link functions are also run in priority order, but post-link functions are run in reverse order. The order of directives with the same priority is undefined. The default priority is <code><span class="lit">0</span></code>.</p>
</blockquote>
<div ng-app="test" ng-controller="TestCtrl">
    <button ng-click="log('ngClick')" click-one click-two>Click</button> <pre>{{message}}</pre>

</div>

JavaScript

angular.module('test', [])
    .controller('TestCtrl', function ($scope) {
    $scope.message = '';
    $scope.log = function (msg) {
        $scope.message += msg + '\n';
    };
}).directive('clickOne', function () {
    return {
        priority: -100,
        link: function (scope, element, attrs) {
            scope.log('linking clickOne');
            element.bind('click', function (e) {
                scope.$apply(function () {
                    scope.log('clickOne');
                });
                return stop(e);
            });
        }
    };
}).directive('clickTwo', function () {
    return {
        priority: 100,
        link: function (scope, element, attrs) {
            scope.log('linking clickTwo');
            element.bind('click', function (e) {
                scope.$apply(function () {
                    scope.log('clickTwo');
                });
                return stop(e);
            });
        }
    };
});

function stop(event) {
    event.stopImmediatePropagation();
    event.preventDefault();
    event.stopPropagation();
    return false;
}