AngularJS 在自定义指令中包装 ui-select [英] AngularJS Wrapping a ui-select in a custom directive
本文介绍了AngularJS 在自定义指令中包装 ui-select的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将 ui-select 包装在自定义指令中.(https://github.com/angular-ui/ui-select)>
this.adminv2.directive('eventSelect', function() {返回 {限制:'E',替换:真的,范围: {ngModel: '=',占位符:'='},控制器:函数($scope,$http){返回 $scope.refreshEvents = 函数(searchTerm){return $http.get('/events/autocomplete', {参数:{术语:搜索术语}}).then(函数(响应){返回 $scope.events = response.data;});};},模板:<div>{{ngModel}}\n <ui-select ng-model=\"ngModel\"\n theme=\"bootstrap\"\n ng-disabled=\"disabled\"\nreset-search-input=\"false\">\n \n \n
"};});
select 正常工作,但与 ng-model 的绑定不起作用.我无法设置模型或读取它.我不明白,因为当我使用诸如
之类的简单模板时它可以工作
有什么特别的事情要做,因为我在指令中包装了一个指令?
解决方案
我设法通过将模板中的 ng-model 设置为
来使绑定工作ng-model="$parent.ngModel"
I'm trying to wrap a ui-select in a custom directive. (https://github.com/angular-ui/ui-select)
this.adminv2.directive('eventSelect', function() {
return {
restrict: 'E',
replace: true,
scope: {
ngModel: '=',
placeholder: '='
},
controller: function($scope, $http) {
return $scope.refreshEvents = function(searchTerm) {
return $http.get('/events/autocomplete', {
params: {
term: searchTerm
}
}).then(function(response) {
return $scope.events = response.data;
});
};
},
template: "<div>{{ngModel}}\n <ui-select ng-model=\"ngModel\"\n theme=\"bootstrap\"\n ng-disabled=\"disabled\"\n reset-search-input=\"false\">\n <ui-select-match placeholder=\"Enter an event\">{{$select.selected.name}}</ui-select-match>\n <ui-select-choices repeat=\"event in events track by $index\"\n refresh=\"refreshEvents($select.search)\"\n refresh-delay=\"0\">\n <span ng-bind-html=\"event.name | highlight: $select.search\"></span>\n <i class=\"icon-uniF111 fg type-{{raceType}} pull-right\" ng-repeat='raceType in event.racetypes'></i>\n <br>\n {{event.dates}} <i class='pull-right'>{{event.location}}</i>\n </ui-select-choices>\n </ui-select>\n</div>"
};
});
The select works properly, but the binding with ng-model doesn't work. I cannot set the model or read it. I don't get it since it works when I use a simple template such as
<div><input ng-model="ngModel"></div>
Is there something special to do because I wrap a directive in directive ?
解决方案
I managed to make the binding work by setting the ng-model in the template as
ng-model="$parent.ngModel"
这篇关于AngularJS 在自定义指令中包装 ui-select的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文