[英]pass array of data from controller to custom directive?
我试图将对象的数组从角度控制器传递到自定义指令元素,并使用ng-repeat迭代该对象,但是我没有得到数据。
$scope.mydata=[
{
"_id":"1",
displayConfig:[
{
"fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "sree"
},{
"fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "sravs"
},{
"fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "sree"
},
],
"name": "Alabama",
"abbreviation": "AL"
},
{
"_id":"2",
displayConfig:[
{
"fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "yui"
},{
"fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "juim"
},{
"fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "aww"
},
],
"name": "Alaska",
"abbreviation": "AK"
},
{
"_id":"3",
displayConfig:[
{
"fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "fgt"
},{
"fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "ertyu"
},{
"fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "ghytt"
},
],
"name": "bmerican Samoa",
"abbreviation": "AS"
},
{
"_id":"4",
displayConfig:[
{
"fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "hjjhu"
},{
"fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "rdrer"
},{
"fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "xds"
},
],
"name": "drizona",
"abbreviation": "AZ"
},
{
"_id":"5",
displayConfig:[
{
"fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "errrr"
},{
"fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "ddd"
},{
"fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "nnnn"
},
],
"name": "crkansas",
"abbreviation": "AR"
}
];
html文件...........
<search items="mydata" prompt="Start typing a US state" title="mydata.displayConfig[0].propertyName" subtitle="abbreviation" id="_id" model="_id" on-selectupdate="onItemSelected()" />
directive.js
.directive('search', function($timeout) {
return {
restrict: 'AEC',
scope: {
items: '=',
prompt:'@',
title: '@',
subtitle:'@',
model: '=',
onSelectupdate:'&'
},
link:function(scope,elem,attrs){
scope.handleSelection=function(selectedItem){
scope.model=selectedItem;
console.warn(scope.items);
scope.current=0;
scope.selected=true;
$timeout(function(){
scope.onSelectupdate();
},200);
};
scope.current=0;
scope.selected=true;
scope.isCurrent=function(index){
return scope.current==index;
};
scope.setCurrent=function(index){
scope.current=index;
};
},
templateUrl : TAPPLENT_CONFIG.HTML_ENDPOINT[0]+'home/genericsearch.html' }
})
genericsearch.html
<div class="multitext-wrap blue-border">
<input type="text" ng-model="model" ng-keydown="selected=false"/><br/>
<div class="items" ng-hide="!model.length || selected">
<div class="item" ng-repeat="item in items" ng-click="handleSelection(item[title])" style="cursor:pointer" ng-class="{active:isCurrent($index)}" ng-mouseenter="setCurrent($index)">
<p class=" tag-label">{{item[title]}}</p><span class="tag-cross pointer" ng-click="removeOrg($index);">x</span>
</div>
</div>
</div>
请帮助解决此问题。 提前致谢
您可以通过attrs在链接函数中访问它:
function(scope,elem,attrs)
{
var mydata = attrs.model;
}
但是您的操作方式有些不妥。 我认为这里比较聪明,使用服务或工厂也更容易。
将此与链接函数的attrs参数结合
尝试观察您的参数。 可能您在尝试使用之前就尝试使用它。
.directive('search', function($timeout) {
return {
restrict: 'AEC',
scope: {
items: '=',
prompt:'@',
title: '@',
subtitle:'@',
model: '=',
onSelectupdate:'&'
},
link:function(scope,elem,attrs){
scope.handleSelection=function(selectedItem){
scope.model=selectedItem;
console.warn(scope.items);
scope.current=0;
scope.selected=true;
$timeout(function(){
scope.onSelectupdate();
},200);
};
scope.$watch("items", function(newData) {
console.log("Items: ", newData);
});
scope.current=0;
scope.selected=true;
scope.isCurrent=function(index){
return scope.current==index;
};
scope.setCurrent=function(index){
scope.current=index;
};
},
templateUrl : TAPPLENT_CONFIG.HTML_ENDPOINT[0]+'home/genericsearch.html' }
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.