Angularjs + 指令隔离双向数据绑定不起作用
Angularjs + directive Isolate two way data binding not working
我尝试使用指令模板更新列表。但它在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>
单击 "Use me!" 意味着我需要发送 http 请求,然后显示 list.html 中相应内容的列表。
lookupProduct 功能有效,但唯一的问题是产品没有更新。
详情:
我添加了两个指令。
1. lookupProductIcon - 显示文本。单击此文本意味着需要 http get 请求,然后响应需要在 list.html 中更新(lookupProducts 指令)
2. lookupProducts - 这里的数据没有更新。
您的 lookupProducts
指令有一个范围变量 products
,它未在您的 html 标记中传递。
您需要将一系列产品传递给您的 lookupProducts
指令。
<div lookup-products products="products"></div>
我尝试使用指令模板更新列表。但它在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>
单击 "Use me!" 意味着我需要发送 http 请求,然后显示 list.html 中相应内容的列表。
lookupProduct 功能有效,但唯一的问题是产品没有更新。
详情:
我添加了两个指令。 1. lookupProductIcon - 显示文本。单击此文本意味着需要 http get 请求,然后响应需要在 list.html 中更新(lookupProducts 指令) 2. lookupProducts - 这里的数据没有更新。
您的 lookupProducts
指令有一个范围变量 products
,它未在您的 html 标记中传递。
您需要将一系列产品传递给您的 lookupProducts
指令。
<div lookup-products products="products"></div>