I am new to Angular and I'm experiencing an issue with my ng-click not working in certain contexts. Let me share my code and explain the problem more clearly.
HTML :
<div ng-app='myApp'>
<section id="map-orders" ng-controller="ProductsController as products">
<div class="product-box" ng-repeat="products in products.products | orderBy:'name'">
<div class="product">
<h3> {{products.name}} </h3>
<span ng-click="remove($index)">Remove</span>
</div>
</div>
</section>
</div>
JS :
var app = angular.module('myApp', [ ]);
app.controller('ProductsController', function(){
this.products = products;
this.remove = function(index) {
products.splice(index, 1);
}
});
var products = [
{
name: "Carte 1",
generationDate: "03/03/2016",
},
{
name: "Carte 2",
generationDate: "04/03/2016",
}
];
The above code works fine. However, when I introduce a directive like this: HTML :
<div ng-app='myApp'>
<section id="map-orders" ng-controller="ProductsController as products">
<div class="product-box" ng-repeat="products in products.products | orderBy:'name'">
<product></product>
</div>
</section>
</div>
And include this additional JavaScript for the directive:
app.directive('product', function() {
var tpl = '<div class="product">' +
'<h3 {{products.name}} </h3>' +
'<span ng-click="remove($index)">Remove</span>'
'</div>';
return {
restrict: 'E',
template: tpl,
};
});
Now, my remove() function does not work. I'm unsure why this is happening. Any help specifically related to my code would be greatly appreciated.
Thank you in advance.