[英]pass variable to directive AngularJS
我將數組傳遞給用於ng-repeat的指令。 我還想傳遞一個綁定到輸入字段的變量。 我這樣做的方式,沒有表現出任何東西。
這是HTML代碼:(我調用指令的部分在底部)
<div class="widget-body" id="widget-dispatch">
<div class="padding-dispatch">
<form id="dispatch-search">
<input id="search-fld" type="text" name="param" placeholder="To search type here..." ng-model="searchDispatch">
</form>
<div class="category-list">
<a class="category-link active" ng-click="dispatchList(dataPersons)">
<span>Persons</span><span class="category-badge active">99</span>
</a>
<span class="vertical-devider"> </span>
<a class="category-link" ng-click="dispatchList(dataProjects)">
<span>Projects</span><span class="category-badge">15</span>
</a>
<span class="vertical-devider"> </span>
<a class="category-link" ng-click="dispatchList(dataConstructionYards)">
<span>Construction yards</span><span class="category-badge">32</span>
</a>
<span class="vertical-devider"> </span>
<a class="category-link" ng-click="dispatchList(dataContainers)">
<span>Containers</span><span class="category-badge">85</span>
</a>
<span class="vertical-devider"> </span>
<a class="category-link" ng-click="dispatchList(dataVehicles)">
<span>Vehicles</span><span class="category-badge">66</span>
</a>
</div>
</div>
<div id="dispatch-list">
<div class="dispatch-categories first"><strong>Dispatched to</strong></div>
<div class="dispatch-categories"><strong>Collective</strong></div>
<div class="dispatch-categories"><strong>Unique</strong></div>
<div class="dispatch-categories"><strong>Inspections</strong></div>
<div class="dispatch-categories"><strong>Unused</strong></div>
</div>
<dispatch data='listToDispatch' search='{{searchDispatch}}'></dispatch>
</div>
這是指令:
define(['dashboard/module', 'lodash'], function (module) {
'use strict';
return module.registerDirective('dispatch', function () {
return {
controller: 'DashboardCtrl',
restrict: 'E',
scope: {
data: '=',
search: '@'
},
template: '<div class="padding-dispatch" ng-repeat="(name,user) in data | filter:search">' +
'<strong>{{name}}</strong>' +
'<p>{{search}}</p>' +
'<div class="dispatch-charts" chartjsdoughnut="user[0]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[1]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[2]"></div>' +
'<div class="dispatch-charts" chartjsdoughnut="user[3]"></div>' +
'<hr />' +
'</div>'
}
});
});
因此,我的數據將傳遞給指令,但搜索不會。
這是listToDispatch包含的數據:
$scope.dataVehicles =
{
"Xavier":
[
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 36,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 40,
color: "#1675a9",
highlight: "#1675a9",
label: "is unique"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is unique"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
]
],
"Tarek":
[
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 76,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
],
[
{
value: 70,
color: "#1675a9",
highlight: "#1675a9",
label: "is in use"
},
{
value: 30,
color: "#7eb3cf",
highlight: "#1675a9",
label: "is used"
}
]
]
};
看起來問題出在指令內部使用search
:
filter:search
在這里, search
是一個值,需要進行插值。
在指令隔離范圍內使用search: '='
可能會更好:
scope: {
data: '=',
search: '='
}
然后將指令屬性更改為不插值:
<dispatch data='listToDispatch' search='searchDispatch'></dispatch>
如果查看filter的文檔,您會發現只能使用|filter:search
來搜索字符串數組。
我想你要找的是
|filter:{$:search}
它將搜索listToDispatch中包含的Objects的所有屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.