UI-упоминание возвращается неопределенным при выборе

Я пытаюсь реализовать директиву ui-упоминания в моей версии angularJs 1.6.9. Ссылка используется для того же: https://github.com/angular-ui/ui-mention Код сделано до сих пор: HTML:

<div class="bion-catalog-campaign-ads-links__mention-container">
    <textarea ui-mention mention-example options=$ctrl.catalogFields
    ng-model="$ctrl.post.message"
    placeholder="Use @mention to trigger"
    ng-trim="false"
    ></textarea>
    <div class="mention-highlight"></div>
    length: {{$mention.choices.length}}
    <ul ng-if="$mention.choices.length" class="dropdown">
        <li ng-repeat="choice in $mention.choices track by $index" ng-class="{active:$mention.activeChoice==choice}">
            <a ng-click="$mention.select(choice)">
            {{::choice.label}}
            </a>
        </li>
    </ul>
</div>
<div>
    <p>
    $mentions.mentions: {{$mention.mentions | json}}
    </p>
    <p>
    ng-model ($ctrl.post.message): {{$ctrl.post.message | json}}
    </p>
</div>

контроллер:

this.catalogFields = CATALOGFIELDS;
this.post = {
            message: 'hi there @k'
        };

Модуль с директивой:

angular.module('bionCatalogCampaign', ['ui.mention'])

    .component('xxxxx', xxxxx)
    .service('###', ##)
    .config(config)
    .directive('mentionExample', function () {
        return {
            restrict: 'A',
            require: 'uiMention',
            scope: {
                'options': '=',
            },  

            link: function link($scope, $element, $attrs, uiMention) {
                console.log('$scope', $scope.options);
              uiMention.findChoices = function (match, mentions) {
                return $scope.options
                // Remove items that are already mentioned
                .filter(function (choice) {
                  return !mentions.some(function (mention) {
                    return mention.label === choice.label;
                  });
                })
                // Matches items from search query
                .filter(function (choice) {
                  return ~(choice.label).indexOf(match[1]);
                });
              };
            }
        };
    });

и CSS.

Пользовательский интерфейс отображается, но при выделении выбранное значение не отображается в текстовой области. Вместо этого "неопределенный неопределенный" появляется с выделенным фоном. Снимок экрана ниже: https://www.screencast.com/t/cwnoWWUogx0X

0 ответов

Другие вопросы по тегам