JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
/*
Controllers
*/
app.controller( 'appController', function( $scope ) {
});
app.controller( 'routeController', function( $scope, $routeParams ) {
//When route change, check if page has been updated and run animateScroll directive
if(typeof $routeParams !== 'undefined' && $routeParams.page.length > 0){
$scope.animateScroll($routeParams.page);
}
});
/*
Page routes
*/
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home/:page', {
templateUrl: 'home-template',
controller: 'routeController'
})
.otherwise({
redirectTo: '/home/'
});
}]);
/*
Directives
*/
app.directive('scroll', function ($routeParams, $timeout) {
/*
Scroll to element ID
*/
return {
restrict: 'A',
link: function(scope, elm, attrs) {
scope.animateScroll = function(page) {
$timeout(function(){
console.log('test');
if(jQuery('#' + page).length == 1){
jQuery('html, body').animate({
scrollTop: jQuery('#' + page).position().top
});
};
}, 1);
};
}
};
});
app.directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function () {
return { height: w.height() };
};
scope.$watch(scope.getWindowDimensions, function (dimensions) {
scope.windowHeight = dimensions.height;
scope.style = function () {
...
CSS
.page{
border: 1px solid red;
}