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