After attempting to update the list using a directive template, the data is not being updated following an HTTP request.
test.html:
<div ng-repeat=" comment in [{name:"A"},{name:"B"},{name:"C"}]">
<div lookup-product-icon lookup="lookupProduct(comment)" products="products"></div>
</div>
<div lookup-products></div>
....
Directive:
var app = angular.module('myApp');
app.directive('lookupProductIcon', function() {
return {
scope : {
lookup : "&"
},
template : '<div ng-click="lookup()">Use me!</div>',
};
});
app.directive('lookupProducts', function() {
return {
restrict : 'EA',
transclude : false,
scope : {
products : '='
},
templateUrl : 'lists.html'
};
});
Controller
$scope.products = [];
$scope.lookupProduct = function(lists) {
var details = {
name : lists.name,
host : $scope.host_name
};
productService.lookupProduct(details).then(function(data) {
$scope.products = data.list;
console.log($scope.products);
//Here display the lists in developer tools.
}).catch(function(data) {
if (data.message) {
alert(data.message);
}
});
};
List.html:
<ul>
<li ng-repeat = "product in products"> {{product.name}} </li>
</ul>
When clicking "Use me!", an HTTP request should be sent and the response should update the lists in list.html.
The lookupProduct function works correctly, but the issue lies in the products not updating.
Details:
I have included two directives: 1. lookupProductIcon - This displays text which, when clicked, triggers an HTTP GET request for updating the data in list.html (lookupProducts directive). 2. lookupProducts - The data update does not occur here.