Angularjs +指令隔离两种方式数据绑定不起作用答案

【问题标题】：Angularjs + directive Isolate two way data binding not workingAngularjs +指令隔离两种方式数据绑定不起作用
【发布时间】：2016-08-02 09:40:14
【问题描述】：

我尝试使用指令模板更新列表。但它不会在 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);
                }
            });

        };

列表.html：

<ul>
  <li ng-repeat = "product in products">    {{product.name}}    </li>
</ul>

一旦我点击“使用我！”意味着我需要发送 http 请求，然后在 list.html 中显示相应内容的列表。

lookupProduct 功能正常，但唯一的问题是产品没有更新。

详情：

我添加了两个指令。 1.lookupProductIcon - 显示文本。单击此文本后，意味着需要 http 获取请求，然后需要在 list.html 中更新响应（lookupProducts 指令） 2.lookupProducts - 这里的数据没有更新。

【问题讨论】：

您在 lookup-products 指令中定义产品，但在 lookup-product-icon 查找中使用。为什么？
我正在使用这个模块的许多页面。所以我创建了查找产品图标。
你确定lookup() 推出了吗？ ng-click 上的那个。我这么说是因为在某些情况下，当我添加动态指令时，我必须调用 $scope.apply()。
我确信我会在成功后获取数据。 $scope.products = data.list;

标签： javascript angularjs angularjs-directive scope isolate-scope

【解决方案1】：

您的 lookupProducts 指令有一个范围变量 products 未在您的 html 标记中传递。

您需要将一系列产品传递给您的 lookupProducts 指令。

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

【讨论】：

天哪。只是我的错。谢谢