Angular+JQ+Bootstrap

by andytjoslin

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>
<div ng-controller="MyCtrl">
    <book>
        <page><b>Page 1</b></page>
        <page><div ng-init="variable=6">
            <b>Page 2</b><br />
            {{variable}}<br />
            <input ng-model="variable">
        </page>
    </book>
</div>

JavaScript

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

function MyCtrl($scope){};

app.directive('book', function($compile) {
    return {
        restrict: 'E',
        controller: function($scope, $element, $attrs) {
            $scope.pages = [];
            this.addPage = function(html) {
                var compiled = $compile(html)($scope);
                console.log(compiled);
                $scope.pages.push(compiled);
            };
        },
        transclude: true,
        template:
        '<h1>Book Stuff:</h1>'+
        '<div ng-repeat="page in pages">'+
            '<div ng-bind-html-unsafe="page"></div>'+
        '</div>'+
        '<div ng-hide="true" ng-transclude></div>' //we have to put transcluded stuff somewhere lol, so just hide it      
    };
});
app.directive('page', function() {
    return {
        restrict: 'E',
        require: '^book',
        link: function(scope,elm,attrs,book) {
            book.addPage( elm.html() );
        },
    };
});