JSFiddle - React, Tailwind, and code Playground

by qhoc

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div ng-controller="Ctrl">
    <a href="#link1" ng-click="log()">Link 1</a>
    <a href="#link2" ng-click="log()">Link 2</a>
    <a ng-click="back()">Back</a>
    <!--site-header back="back" forward="forward"></site-header-->
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('Ctrl', ['$scope', '$window', '$location', function($scope, $window, $location) {

  $scope.log = function() {
    console.log($location.path());
  };

  $scope.back = function() {
    $window.history.back();
    console.log($location.path());
  };
    
}]);

app.directive('siteHeader', function () {
    return {
        restrict: 'E',
        template: '<button class="btn">{{back}}</button><button class="btn">{{forward}}</button>',
        scope: {
            back: '@back',
            forward: '@forward',
            icons: '@icons'
        },
        link: function(scope, element, attrs) {
            $(element[0]).on('click', function() {
                history.back();
                scope.$apply();
            });
            $(element[1]).on('click', function() {
                history.forward();
                scope.$apply();
            });
        }
    };
});