javascript - Angular directive does not load -
i'm going crazy. i'm trying implement directives in angular app cant simple template show. if me spot problem soo grateful! (i'm new angular, if cans e mistakes or tips structure... t'm glad pointers)
sorry massive amounts of code.
heres esential parts of 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 s.text 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 s.text 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 s.text 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 s.text 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 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 id: " + id) console.log("item 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' } })
in view, replace instances of "kcitemtable" "kc-item-table".
Comments
Post a Comment