Angularjs + директива Изолировать двухстороннюю привязку данных не работает

Question

Я пытаюсь обновить список с помощью шаблона директивы. Но он не обновляет данные после HTTP-запроса.

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> 
.... 

Директива:

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' 
    }; 
}); 

Контроллер

$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> 

Как только я нажму «Использовать меня!» значит, мне нужно отправить http-запрос, а затем отобразить списки для соответствующего содержимого в list.html.

lookupProduct функция работает, но только вещь - это продукты, которые не обновляются.

Я добавил две директивы. 1. lookupProductIcon - отобразить текст. После того, как этот текст щелкнул, нужно выполнить запрос http get, а затем ответ нужно обновить в list.html (директива lookupProducts) 2. lookupProducts - Здесь данные не обновляются.

Answer 1

У вашей директивы lookupProducts есть переменная области видимости products, которая не передается в вашей разметке html.

Вам необходимо передать массив товаров в вашу директиву lookupProducts.

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