将变量传递给指令AngularJS

Question

I am passing an array to the directive which is used for an ng-repeat. I also would like to pass a variable which is bound to an input field. The way i am doing it, isn't showing a thing.

Here is the HTML code: (The part where I call my directive is on the bottom)

<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>

Here is the directive:

    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>'
        }
    });
});

So, my data is being passed to the directive but the search doesn't.

Here is the data which listToDispatch contains:

$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

Looks like the problem is when you are using the search inside the directive:

filter:search

Here, search is a value and needs to be interpolated.

It would probably be better to use search: '=' in the directive isolated scope:

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

And then change the directive attribute to not interpolate:

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

Answer 2

If you take a look at the documentation for filter , you'll see that you can only use |filter:search for searching in String arrays.

I think what you're looking for is

|filter:{$:search}

which will search in all of the properties of the Objects contained in listToDispatch.