Angularjs + directive 양방향 데이터 바인딩이 작동하지 않음

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 지시어에는 html 마크 업에서 전달되지 않는 범위 변수 products이 있습니다.

lookupProducts 지시문에 일련의 제품을 전달해야합니다.

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