For some reason, I can’t remove the description and packaging elements / fields (see the figure) from the variable scope even after deleting their corresponding code and restarting the application. Any help is greatly appreciated.
My directive:
app.directive('formElement', function() {
return {
restrict: 'E',
transclude: true,
scope: {
label : "@",
model : "="
},
link: function(scope, element, attrs) {
scope.disabled = attrs.hasOwnProperty('disabled');
scope.required = attrs.hasOwnProperty('required');
scope.pattern = attrs.pattern || '.*';
console.log(element);
},
template:
'<div class="form-group">' +
'<label class="col-sm-3 control-label no-padding-right"> {{label}}</label>' +
'<div class="col-sm-7">' +
'<span class="block input-icon input-icon-right" ng-transclude></span>' +
'</div></div>'
};
});
My controllers:
app.controller('ProductsCtrl', function ($scope, $modal, $filter, Data) {
$scope.product = {};
Data.get('products').then(function(data){
$scope.products = data.data;
});
$scope.changeProductStatus = function(product){
product.status = (product.status=="Active" ? "Inactive" : "Active");
Data.put("products/"+product.id,{status:product.status});
};
$scope.deleteProduct = function(product){
if(confirm("Are you sure to remove the product?")){
Data.delete("products/"+product.id).then(function(result){
$scope.products = _.without($scope.products, _.findWhere($scope.products, {id:product.id}));
});
}
};
$scope.open = function (p,size) {
var modalInstance = $modal.open({
templateUrl: 'partials/product-edit.html',
controller: 'ProductEditCtrl',
size: size,
resolve: {
item: function () {
return p;
}
}
});
modalInstance.result.then(function(selectedObject) {
if(selectedObject.save == "insert"){
$scope.products.push(selectedObject);
$scope.products = $filter('orderBy')($scope.products, 'id', 'reverse');
}else if(selectedObject.save == "update"){
p.price = selectedObject.price;
p.stock = selectedObject.stock;
}
});
};
$scope.columns = [
{text:"ID",predicate:"id",sortable:true,dataType:"number"},
{text:"Name",predicate:"name",sortable:true},
{text:"Price",predicate:"price",sortable:true},
{text:"Stock",predicate:"stock",sortable:true},
{text:"Status",predicate:"status",sortable:true},
{text:"Action",predicate:"",sortable:false}
];
});
app.controller('ProductEditCtrl', function ($scope, $modalInstance, item, Data) {
$scope.product = angular.copy(item);
$scope.cancel = function () {
$modalInstance.dismiss('Close');
};
$scope.title = (item.id > 0) ? 'Edit Product' : 'Add Product';
$scope.buttonText = (item.id > 0) ? 'Update Product' : 'Add New Product';
var original = item;
$scope.isClean = function() {
return angular.equals(original, $scope.product);
};
$scope.saveProduct = function (product) {
product.uid = $scope.uid;
if(product.id > 0){
Data.put('products/'+product.id, product).then(function (result) {
if(result.status != 'error'){
var x = angular.copy(product);
x.save = 'update';
$modalInstance.close(x);
}else{
console.log(result);
}
});
}else{
product.status = 'Active';
Data.post('products', product).then(function (result) {
if(result.status != 'error'){
var x = angular.copy(product);
x.save = 'insert';
x.id = result.data;
$modalInstance.close(x);
}else{
console.log(result);
}
});
}
};
});
HTML:
product-edit.html (partial):
<div class="modal-header">
<h3 class="modal-title">Edit product [ID: {{product.id}}]</h3>
</div>
<div class="modal-body">
<form name="product_form" class="form-horizontal" role="form" novalidate>
<form-element label="NAME" mod="product">
<input type="text" class="form-control" name="name" placeholder="Name" ng-model="product.name" ng-disabled="product.id" focus/>
</form-element>
<form-element label="PRICE" mod="product">
<input type="text" name="price" class="form-control" placeholder="PRICE" ng-model="product.price" only-numbers/>
<small class="errorMessage" ng-show="product_form.price.$dirty && product_form.price.$invalid"> Enter the price.</small>
</form-element>
<form-element label="STOCK" mod="product">
<input type="text" name="stock" class="form-control" placeholder="STOCK" ng-model="product.stock" only-numbers/>
<small class="errorMessage" ng-show="product_form.stock.$dirty && product_form.stock.$invalid"> Enter the available stock.</small>
</form-element>
<div class="modal-footer">
<form-element label="">
<div class="text-right">
<a class="btn btn-sm" ng-click="cancel()">Cancel</a>
<button ng-click="saveProduct(product);"
ng-disabled="product_form.$invalid || enableUpdate"
class="btn btn-sm btn-primary"
type="submit">
<i class="ace-icon fa fa-check"></i>{{buttonText}}
</button>
</div>
</form-element>
</div>
</form>
</div>
products.html (partial):
<div class="panel panel-default">
<div class="panel-heading" style="height: 60px;">
<div class="pull-left">
<input placeholder="Filter inventory list ..." class="form-control" aria-describedby="basei" ng-model="filterProduct" ng-change="resetLimit();" autocomplete="off" type="text" focus>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default fa fa-plus" ng-click="open(product);">Add New Product</button>
</div>
</div>
<div class="panel-body">
<div class="input-group pull-right">
</div>
<table class="table table-striped">
<tr ng-show="products.length==0"><td style="vertical-align:middle;"><i class="fa fa-ban fa-3x"></i> No data found</td></tr>
<tr ng-hide="products.length>-1"><td style="vertical-align:middle;"><i class="fa fa-spinner fa-spin"></i> Loading</td></tr>
<tr><th ng-repeat="c in columns">{{c.text}}</th></tr>
<tr ng-repeat="c in products | filter:filterProduct | orderBy:'-id'" id="{{c.id}}" animate-on-change='c.stock + c.price' ng-animate=" 'animate'">
<td>{{c.id}}</td><td>{{c.name}}</td><td>{{c.price}}</td><td>{{c.stock}}</td>
<td>
<button class="btn" ng-class="{Active:'btn-success', Inactive:''}[c.status]" ng-click="changeProductStatus(c);">{{c.status}}</button>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default fa fa-edit" ng-click="open(c);"></button>
<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="deleteProduct(c);"></button>
</div>
</td>
</tr>
</table>
</div>
</div>