javascript - 将变量传递给指令 AngularJS

Question

我将一个数组传递给用于 ng-repeat 的指令。我还想传递一个绑定(bind)到输入字段的变量。我这样做的方式并没有表现出任何东西。

这是 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 时:

过滤器:搜索

这里，search 是一个值，需要进行插值。

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

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

然后将指令属性更改为不插值:

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