<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp" ng-class="{'disable-anims': disableAnims}">
<a ui-sref="app.stateA">State A</a> <a ui-sref="app.stateB">State B</a>
<div ui-view></div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<!-- Angular Animate -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
angular.module('myApp', [
'ui.router',
'ngAnimate'
])
.controller('AppCtrl', ['$scope', 'blockConfig', function ($scope, blockConfig) {
$scope.title = 'MyApp';
$scope.config = blockConfig;
}])
.controller('StateACtrl', ['$scope', 'blockConfig', function ($scope, blockConfig) {
$scope.enabled = blockConfig.enabled;
}])
.controller('StateBCtrl', ['$scope', 'blockConfig', function ($scope, blockConfig) {
$scope.enabled = blockConfig.enabled;
}])
.directive('directive', function () {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
template: '<div class="directive"><p>Inside directive enabled = {{config.enabled}}, collapsed = {{config.collapsed}}</p><a class="toggle-side-panel" ng-click="toggle()">close</a></div>',
controller: ['$scope', function ($scope) {
$scope.collapsed = false;
$scope.toggle = function () {
$scope.config.collapsed = !$scope.config.collapsed;
}
}]
};
})
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('app', {
abstract: true,
template: '<h1>{{title}}</h1><div ng-class="{\'is-collapsed\': config.collapsed}"><directive config="config" ng-if="config.enabled"></directive><div ui-view></div></div>',
controller: 'AppCtrl',
resolve: {
blockConfig: function () {
return {
enabled: null,
collapsed: false
};
}
}
})
.state('app.stateA', {
url: '/stateA',
template: '<p class="state stateA">State A, blockConfig.enabled = {{enabled}}</p>',
controller: 'StateACtrl',
resolve: {
blockConfig: ['blockConfig', function (blockConfig) {
blockConfig.enabled = false;
return blockConfig;
}]
}
})
.state('app.stateB', {
url: '/stateB',
template: '<p class="state stateB">State B, blockConfig.enabled = {{enabled}}</p>',
controller: 'StateBCtrl',
resolve: {
blockConfig: ['blockConfig', function (blockConfig) {
blockConfig.enabled = true;
return blockConfig;
}]
}
});
}]);
.state {
position: relative;
}
.stateA {
background-color: lightgreen;
}
.stateB {
background-color: slategrey;
}
.directive {
position: absolute;
width: 200px;
background-color: lightblue;
-webkit-transform: translateX(0);
transform: translateX(0);
.toggle-side-panel {
float: right;
}
& + [ui-view] .state {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
}
.is-collapsed-add,
.is-collapsed-remove {
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
.directive,
.directive + [ui-view] .state {
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
}
.is-collapsed {
.directive {
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
}
.directive + [ui-view] .state {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
}