Angular: Testing controller with directive
Purpose:
Use ng-repeat and with controller and directive be able to click any row within the table, get the clicked row highlighted and then expand (beneath the clicked row) and insert another table (which should not be in the DOM all the time.
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="div">
</div>
CSS
.div{
background-color: green,
}
JavaScript
var app = angular.module('app', ['ui.bootstrap']);
app.directive('expandRow', function() {
return {
restrict: 'E',
template: '<h1>Loading</h1>',
scope: {
show: '=?',
},
controller: "BusyIndicatorController as busyIndicatorController",
};
});
app.controller("BusyIndicatorController", BusyIndicatorController);
BusyIndicatorController.$inject = ["$scope", "$interval"];
function BusyIndicatorController($scope, $interval) {
var busyIndicators = [];
$scope.show = true;
}
Array.prototype.Any = function (value) {
for (var i = 0; i < this.length; i++) {
if (this[i] === value)
return true;
}
return false;
};