如何将参数传递给 Angular 指令中的函数？答案

【问题标题】：How to pass parameters to a function within an Angular directive?如何将参数传递给 Angular 指令中的函数？
【发布时间】：2014-03-18 01:04:29
【问题描述】：

在AngularJS directive 中，我触发了一个回调函数，该函数需要访问已注入的指令级对象。

我为此使用了 KendoUI 模板函数，但是我认为这更多的是关于范围的问题而不是函数。

指令：

app.directive('projectEditorGrid', function (dataSourceFactory) {

    var dataSourceFactory = new dataSourceFactory("/odata/ProjectEditor");

    return {
        link: function ($scope, $element, $attrs) {
            $element.kendoGrid({
                dataSource: dataSourceFactory.projects(),
                pageable: true,
                height: 400,
                toolbar: ["create"],
                columns: [
                            { field: "WebsiteName", editable: true, width: 190, title: "Project Name", validation: { required: { message: "Project name is required" } } },
                            { field: "WebsiteNotes", title: "Project Notes" },
                            { field: "WebsiteGUID", title: "Project API ID", editable: false },
                            { field: "DefaultContentType", title: "Default Content Type", width: "160px", editor: defaultContentTypeDropDownEditor, template: "#=ContentTypes.Descriptions#" },
                            { command: ["edit", "destroy"] }
                ],
                editable: "inline"
            });

            function defaultContentTypeDropDownEditor(container, options) {
                console.log(container + " : " + options);
                var dataSourcFactory = dataSourceFactory("/odata/ContentType");
                var dsContentTypes = dataSourceFactory.contentTypes();  // returns a kendo.data.DataSource() object

                $('<input required data-text-field="Description" data-value-field="ContentTypeId" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataSource: dataSourceFactory.contentTypes()
                    }); // kendoDropDownList
            }
        }
    }
});

dataSourceFactory 被注入指令并成功用于显示数据。

当触发行编辑时，将使用其默认参数 container, options 调用 defaultContentTypeDropDownEditor。如果我可以将dataSourceFactory 传递给这个函数，我会被设置，但不清楚如何从激活调用中完成此操作。

options:

Object {field: "DefaultContentType", editor: function, model: n.extend.o}
editor: function defaultContentTypeDropDownEditor(container, options) {
field: "DefaultContentType"
model: n.extend.o
__proto__: Object

container:

[<td role="gridcell" data-container-for="DefaultContentType"></td>]

如您所见，dataSourceFactory 在函数级别可见（注入到指令中），但无法从 defaultContentTypeDropDownEditor 中访问。有人可以解释一下如何做到这一点吗？

【问题讨论】：

您有一个var dataSourcFactory（缺少e）。那是错字吗？如果是，并且 var 的实际名称是 dataSourceFactory，它会从外部范围隐藏 dataSourceFactory。尝试将其重命名为有意义但不同的名称。
您的评论命名和隐藏范围引导我找到答案，谢谢。

标签： javascript angularjs angularjs-directive scope

【解决方案1】：

注入的对象是dataSourceFactory。通过将初始初始化重命名为 dataSourceFactory1 并将函数回调对它的使用重命名为 dataSourceFactory2，我能够让它工作。

感谢 Nikos 为我指明了正确的方向。

【讨论】：