Angular+JQ+Bootstrap

by boushley

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div ng-controller="MyCtrl">
    <button ng-click="toggle()">TOGGLE</button>
    <ul>
        <li ng-repeat="item in data">
            <leaky-label item="item"></leaky-label>
        </li>
    </ul>
</div>

JavaScript

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

function MyCtrl($scope, $timeout) {
    $scope.data = [];
    var i = 0, cont = true;
    
    $scope.toggle = function () {
        cont = !cont;
        changeElements();
    };
    
    function changeElements() {
        if (!cont) {
            return;
        }
        
        $scope.data = [];
        for (var j = 0; j<30; j++) {
            $scope.data.push({title: "Item "+i});
            i++;
        }
        
        $timeout(changeElements, 3000);
    }
    
    changeElements();
}

app.directive('leakyLabel', function () {
    return {
        restrict: 'E',
        replace: true,
        controller: 'leakyCtrl',
        template: '<div><span>{{item.title}}</span></div>',
        link: function (scope, element, attrs, ctrl) {
            scope.item = scope.$eval(attrs.item);
            window.addEventListener('resize', function () {
                scope.test += attrs.item;
            });
        }
    };
});

app.controller('leakyCtrl', function ($scope) {
    var leaked = new LeakedData();
    
    $scope.clicked = function () { 
        alert(leaked.data);
    };
});

function LeakedData() {
    this.data = "";
    for (var i = 0; i < 500; i++) {
        this.data += Math.random.toString(2);
    }
}