<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<script src="http://mobileangularui.com/dist/js/mobile-angular-ui.min.js"></script>
<link rel="stylesheet" href="http://mobileangularui.com/dist/css/mobile-angular-ui-base.min.css" />
<script src="app.js"></script>
</head>
<body>
<div ui-yield-to="modals"></div>
<div class="app">
<div class="app-body">
<ng-view class="app-content"></ng-view>
</div>
</div>
</body>
</html>
var app = angular.module('myApp', ['ngRoute', 'mobile-angular-ui']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/home', {
controller: 'homeController',
templateUrl: 'home.html'
});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
app.controller('homeController', function ($scope, SharedState) {
//watch model state
$scope.$watch(function () {
return SharedState.get('event');
}, function (newValue) {
console.log('event changed to ' + newValue);
});
});
app.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: 'template.html',
link: function (scope, element, attrs) {
scope.do = function () {
console.log('doing something...');
}
}
};
});
<x-my-directive></x-my-directive>
<div ui-content-for="modals">
<div class="modal" ui-if="event" ui-state="event">
<div class="modal-backdrop in">
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" ui-turn-off="event">x</button>
<h4 class="modal-title">Titel</h4>
</div>
<div class="modal-body">Body</div>
<div class="modal-footer">
<button ui-turn-off="event" class="btn btn-default">default</button>
<button ui-turn-off="event" class="btn btn-primary" ng-click="do()">primary</button>
</div>
</div>
</div>
</div>
</div>
<button ui-if="!event" ui-turn-on="event" class="btn btn-primary">Show</button>
<button ui-if="event" ui-turn-off="event" class="btn btn-danger">Hide</button>