Question

我将数组传递给用于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"
                }
            ]
        ]
    };

Answer 1

当你在指令中使用search时看起来问题是：

filter:search

此处，search是一个值，需要进行插值。

在指令隔离范围中使用search: '='可能更好：

scope: {
    data: '=',
    search: '='
}

然后将directive属性更改为not interpolate：

<dispatch data='listToDispatch' search='searchDispatch'></dispatch>

Answer 2

如果您查看filter的文档，您将看到只能使用|filter:search在字符串数组中进行搜索。

我认为您正在寻找的是

|filter:{$:search}

将搜索listToDispatch中包含的对象的所有属性。

将变量传递给指令AngularJS

2 个答案: