Question

我目前正在开发一个在AngularJS中开发的应用程序。该应用程序是由我的公司内部开发的（它已经经历了许多版本，但仍在开发中 - 添加/改进功能/错误修复等）。

应用程序使用ngTagsInput库来显示系统变量和其他此类信息。

我最近一直在努力的特殊功能是尝试为表格小部件中的单元格添加多个按钮。使用HTML表单创建窗口小部件，以允许用户输入其属性（标题，列和行）。

在原始状态下（当我开始处理它时），只能显示文本和文本。表中的系统变量 - 我添加了能够通过编写一个函数来显示表格单元格中的按钮的功能，该函数将每个元素（文本，用逗号分隔）输入到HTML表单的“行”字段中作为按钮，如果该元素的第一个字符是:（以下字符必须是表示页面的有效路径的字符串 - 即像超链接）。

我现在想要扩展此功能，以便可以向单个表格单元格添加多个按钮。但是，尽管我已经编写了代码来执行此操作，但我发现它实际上并不像我期望的那样工作，因为使用的基础函数有一些明显的限制（由ngTagsInput库提供）。

导致我出现此问题的限制是，从ngTagsInput库的自动完成列表功能中选择“标记”时，“标记”只能正确显示为“标记”（因为我的导航按钮构建在同一个功能，它们也只显示为从自动完成列表中选择的按钮），即当用户在表格小部件设置的HTML表单中键入“行”字段时，会显示“自动完成”列表，显示匹配的标签/页面 - 当用户继续输入时，此列表将被过滤。

当用户从自动填充列表中选择标记或页面时，标记或页面仅显示为标记或页面元素（而不是文本）。

由于我现在想在一个表格单元格中显示多个标签/页面按钮，我需要能够一次从自动完成列表中选择多个元素 - 但由于{已经编写了{3}}库。

我已经仔细研究了发生了什么，并确定了库使用的功能，作为此自动完成功能的一部分，以显示标签＆amp;按钮作为标签＆amp;按钮（而不是文本 - 这是他们最初输入的方式）。

我正在使用该库的本地副本，但如果我能帮助它，显然不希望对库本身进行更改。

在需要从我自己的代码中改变行为的情况下，如何重载库提供的函数？

例如，autocomplete指令在addSuggestion()语句的link()函数中定义了return函数 - 如何在代码中的特定实例中重载此函数，以便而不是添加单个标签＆amp;在调用建议列表时重置建议列表，它可以在重置建议列表之前添加多个标签吗？

修改

addSuggestion()函数在库中定义为：

tagsInput.directive('autoComplete', ["$document", "$timeout", "$sce", "$q", "tagsInputConfig", "tiUtil", function($document, $timeout, $sce, $q, tagsInputConfig, tiUtil) {
    function SuggestionList(loadFn, options, events) {
        ...
    }

    function scrollToElement(root, index) {
        ...
    }

    return {
        restrict: 'E',
        require: '^tagsInput',
        scope { source: '&' },
        templateUrl: 'ngTagsInput/auto-complete.html',
        controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
            ...
            $scope.suggestionList = new SuggestionList($scope.source, $scope.options, $scope.events);

            this.registerAutocompleteMatch = function() {
                return {
                    getOptions: function() {
                        return $scope.options;
                    },
                    getQuery: function() {
                        return $scope.suggestionList.query;
                    }
                };
            };
        }],
        link: function(scope, element, attrs, tagsInputCtrl) {
            var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
                suggestionList = scope.suggestionList,
                tagsInput = tagsInputCtrl.registerAutocomplete(),
                options = scope.options,
                events = scope.events,
                shouldLoadSuggestions;

            options.tagsInput = tagsINput.getOptions();
            ...
            scope.addSuggestion = function() {
                var added = false;
                if(suggestionList.selected) {
                    tagsInput.addTag(angular.copy(suggestionList.selected));
                    suggestionList.reset();
                    tagsInput.focusInput();

                    added = true;
                }
                return added;
            };
            ...
            events.on('suggestion-selected', function(index) {
                scrollToElement(element, index);
            });
        }
    };
}]);

AngularJS-如何重载库中实现的函数？

0 个答案: