I'm going crazy. I'm trying to implement directives in my angular app but i cant even get a simple template to show. If someone could help me spot the problem i would be soo grateful! (i'm really new to angular, so if anyone cans e any mistakes or tips about structure... t'm very glad to get pointers)
Sorry for the massive amounts of code.
heres the esential parts of my html:
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="stylesheets/stylesheet.css">
<link href="libs/angular-xeditable-0.1.8/css/xeditable.css" rel="stylesheet">
<title>Kaching</title>
</head>
<body>
<div id='wrapper' class='container' ng-controller='itemController'>
<h1>Kaching</h1>
<kcItemTable>
</kcItemTable>
<tabset>
<tab heading='Oannonserad'>
<div id='unannounced'>
<table class='table table-hover'>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Cost</th>
<th>Starting Price</th>
<th>Ending Price</h>
<th>Buyer</th>
<th>Comment</th>
<th>Status</th>
<th>
<button class='btn btn-default' ng-click='openModal()'>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in unannouncedItemList'>
<td>
<a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
</td>
<td>
<a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
</td>
<td>
<button class='btn btn-danger' ng-click='removeItem(item._id)'>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</tab>
<tab heading='Annonserad'>
<div id='announced'>
<table class='table table-hover'>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Cost</th>
<th>Starting Price</th>
<th>Ending Price</h>
<th>Buyer</th>
<th>Comment</th>
<th>Status</th>
<th>
<button class='btn btn-default' ng-click='openModal()'>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in announcedItemList'>
<td>
<a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
</td>
<td>
<a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
</td>
<td>
<button class='btn btn-danger' ng-click='removeItem(item._id)'>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</tab>
<tab heading='Såld'>
<div id='sold'>
<table class='table table-hover'>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Cost</th>
<th>Starting Price</th>
<th>Ending Price</h>
<th>Buyer</th>
<th>Comment</th>
<th>Status</th>
<th>
<button class='btn btn-default' ng-click='openModal()'>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in soldItemList'>
<td>
<a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
</td>
<td>
<a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
</td>
<td>
<button class='btn btn-danger' ng-click='removeItem(item._id)'>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</tab>
<tab heading='Skickad'>
<div id='shipped'>
<table class='table table-hover'>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Cost</th>
<th>Starting Price</th>
<th>Ending Price</h>
<th>Buyer</th>
<th>Comment</th>
<th>Status</th>
<th>
<button class='btn btn-default' ng-click='openModal()'>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in shippedItemList'>
<td>
<a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
</td>
<td>
<a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
</td>
<td>
<a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
</td>
<td>
<button class='btn btn-danger' ng-click='removeItem(item._id)'>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</tab>
</tabset>
<div id='createNewItemModal'>
<script type='text/ng-template' id='modalContent.html'>
<div class='modal-header'>
<h3 class='modal-title'>Create new item</h3>
</div>
<div class='modal-body'>
<div class='form-group'>
<label for="nameInput">Name</label>
<input type="input" class="form-control" id="nameInput" placeholder="Name" ng-model='item.name'>
</div>
<div class='form-group'>
<label for="descInput">Description</label>
<input type="input" class="form-control" id="descInput" placeholder="Description" ng-model='item.description'>
</div>
<div class='form-group'>
<label for="costInput">Cost</label>
<input type="input" class="form-control" id="costInput" placeholder="Cost" ng-model='item.cost'>
</div>
<div class='form-group'>
<label for="startPriceInput">Starting Price</label>
<input type="input" class="form-control" id="startPriceInput" placeholder="Starting Price" ng-model='item.startprice'>
</div>
<div class='form-group'>
<label for="endPriceInput">Ending Price</label>
<input type="input" class="form-control" id="endPriceInput" placeholder="Ending Price" ng-model='item.endprice'>
</div>
<div class='form-group'>
<label for="commentInput">Comment</label>
<input type="input" class="form-control" id="commentInput" placeholder="Comment" ng-model='item.comment'>
</div>
</div>
<div class='modal-footer'>
<button class='btn btn-warning' ng-click="cancelModal()">Cancel</button>
<button class='btn btn-success' ng-click="addItem()">Create</button>
</div>
</script>
</div>
</div>
<!-- Library Scripts -->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-xeditable-0.1.8/js/xeditable.min.js"></script>
<script src="libs/ui-bootstrap-tpls-0.13.0.min.js"></script>
<!-- Application Scripts -->
<script src='scripts/app.js'></script>
<script src='scripts/controllers/itemController.js'></script>
</body>
</html>
And heres my complete controller:
var app = angular.module('app', ['xeditable', 'ui.bootstrap'])
app.run(function(editableOptions) {
console.log('running xeditable')
editableOptions.theme = 'bs3'
});
function logSuccess(data, status, headers, config) {
console.log(status)
console.log(headers())
console.log(config)
console.log(data)
}
function logError(data, status, headers, config) {
console.log(status)
console.log(headers())
console.log(config)
console.log(data)
}
app.controller('itemController', ['$scope', '$http', '$modal', '$filter', function($scope, $http, $modal, $filter) {
var refresh = function() {
console.log('Getting items')
$http.get('/items').success(function(data, status, headers, config) {
logSuccess(data, status, headers, config)
$scope.unannouncedItemList = data.unannounced
$scope.announcedItemList = data.announced
$scope.soldItemList = data.sold
$scope.shippedItemList = data.shipped
}).error(function(data, status, headers, config) {
logError(data, status, headers, config)
})
}
$scope.$on("refresh", function (event, args) {
refresh()
});
refresh()
$scope.statuses = [
{value: 'UNANNOUNCED', text: 'Oannonserad'},
{value: 'ANNOUNCED', text: 'Annonserad'},
{value: 'SOLD', text: 'Såld'},
{value: 'SHIPPED', text: 'Skickad'}
];
$scope.showStatus = function(item) {
var selected
$scope.statuses.forEach(function(entry) {
if (entry.value == item.status) {
selected = entry
}
})
return (item.status && selected) ? selected.text : 'Not set';
};
$scope.openModal = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'modalContent.html',
controller: 'modalInstanceController',
size: null,
scope: $scope
});
}
$scope.removeItem = function(id) {
console.log(id)
$http.delete('/items/' + id).success(function(data, status, headers, config) {
logSuccess(data, status, headers, config)
refresh()
}).error(function(data, status, headers, config) {
logError(data, status, headers, config)
})
}
$scope.updateItem = function(id, item) {
console.log("Update item with id: " + id)
console.log("Item to update: " + item)
$http.put('/items/' + id, item).success(function(data, status, headers, config) {
logSuccess(data, status, headers, config)
refresh()
}).error(function(data, status, headers, config) {
logError(data, status, headers, config)
})
}
}])
app.controller('modalInstanceController', ['$scope', '$http','$modalInstance', function ($scope, $http, $modalInstance) {
$scope.addItem = function() {
console.log('Post item')
var item = $scope.item
item.status = 'UNANNOUNCED'
$http.post('/items' , item).success(function(data, status, headers, config) {
logSuccess(data, status, headers, config)
$modalInstance.dismiss('cancel')
$scope.$emit('refresh');
}).error(function(data, status, headers, config) {
logError(data, status, headers, config)
})
}
$scope.cancelModal = function () {
$modalInstance.dismiss('cancel')
}
}])
app.directive('kcItemTable', function() {
return {
restrict: 'E',
template: 'habba habba'
}
})
