我正在尝试在我的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