RSKMR RSKMR - 4 months ago 18
AngularJS Question

Angularjs + directive Isolate two way data binding not working

I try to update the list using directive template. But its not update the data after 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>


Once I click the "Use me!" means then i need to send the http request and then display the lists for the respective content in list.html.

lookupProduct function working but only thing is the products not updating.

Details:

I added two directives.
1. lookupProductIcon - Display the text. Once this text clicked means need to the http get request and then response need to update in list.html (lookupProducts directive)
2. lookupProducts - Here the the data not updating.

Answer

Your lookupProducts directive has a scope variable products that is not being passed in your html markup.

You need to pass in an array of products to your lookupProducts directive.

<div lookup-products products="products"></div>

Comments