我在我的 AngularJS 应用程序中使用 select2 插件来显示一些实体(标签)的列表。这是我的模板部分:
select.ddlTags(ui-select2="select2Options", multiple, ng-model="link.tags")
option(ng-repeat="tag in tags", value="{{tag.id}}") {{tag.name}}
这是我的范围代码的一部分:
$scope.select2Options = {
formatNoMatches: function(term) {
var message = '<a ng-click="addTag()">Добавить тэг "' + term + '"</a>'
console.log(message);
return message;
}
}
我想提供在标签列表中不存在的情况下快速添加新标签的功能。所以我覆盖 formatNoMatches select2 选项以显示“添加新标签”链接。我应该如何正确地将 addTag() 函数从 $scope 绑定(bind)到链接的点击事件?
最佳答案
解决这个问题的关键是你必须对formatNoMatches
返回的HTML使用$compile服务。选项对象中的函数。此编译步骤会将标记中的 ng-click 指令连接到范围。不幸的是,这说起来容易做起来难。
您可以在此处查看完整的工作示例:http://jsfiddle.net/jLD42/4/
据我所知,AngularJS 无法监视 select2 控件来监视搜索结果,因此我们必须在找不到结果时通知 Controller 。这很容易通过 formatNoMatches
来完成。功能:
$scope.select2Options = {
formatNoMatches: function(term) {
console.log("Term: " + term);
var message = '<a ng-click="addTag()">Add tag:"' + term + '"</a>';
if(!$scope.$$phase) {
$scope.$apply(function() {
$scope.noResultsTag = term;
});
}
return message;
}
};
$scope.noResultsTag
属性跟踪用户输入的最后一个未返回匹配项的值。将更新包装到 $scope.noResultsTag
with $scope.$apply 是必要的,因为 formatNoMatches
在 AngularJS 摘要循环的上下文之外调用。
可以看$scope.noResultsTag
并编译 formatNoMatches
发生变化时的标记:
$scope.$watch('noResultsTag', function(newVal, oldVal) {
if(newVal && newVal !== oldVal) {
$timeout(function() {
var noResultsLink = $('.select2-no-results');
console.log(noResultsLink.contents());
$compile(noResultsLink.contents())($scope);
});
}
}, true);
您可能想知道 $timeout 在那里做什么。它用于避免使用 formatNoMatches
更新 DOM 的 select2 控件之间的竞争条件。标记和试图编译该标记的 watch 函数。否则,很有可能 $('.select2-no-results')
选择器将找不到它要查找的内容,并且编译步骤将没有任何要编译的内容。
添加标签链接编译完成后,ng-click
指令将能够调用 addTag
Controller 上的功能。您可以在 jsFiddle 中看到这一点。单击添加标签链接将使用您在 select2 控件中输入的搜索词更新标签数组,下次您在 select2 控件中输入新的搜索词时,您将能够在标记和选项列表中看到它。
关于javascript - 在 AngularJS 应用程序中使用 select2 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17572196/