用户选择返回未定义

时间:2018-09-20 05:59:14

标签: angularjs-directive mention

我正在尝试在我的angularJs 1.6.9版本中实现ui-mention指令。引用相同: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。

呈现UI,但是在选择时,选定的值未呈现在文本区域中。相反,“ undefined undefined”以突出显示的背景出现。 下面的屏幕截图: https://www.screencast.com/t/cwnoWWUogx0X

0 个答案:

没有答案