AngularJS在自定义指令中包含ui-select

时间:2022-09-26 11:22:09

I'm trying to wrap a ui-select in a custom directive. (https://github.com/angular-ui/ui-select)

我试图在自定义指令中包含一个ui-select。 (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

选择正常,但与ng模型的绑定不起作用。我无法设置模型或阅读它。我没有得到它,因为它使用一个简单的模板,如

<div><input ng-model="ngModel"></div>

Is there something special to do because I wrap a directive in directive ?

有什么特别的事要做,因为我在指令中包装了一个指令吗?

1 个解决方案

#1


12  

I managed to make the binding work by setting the ng-model in the template as

我设法通过在模板中设置ng-model来进行绑定工作

ng-model="$parent.ngModel"

#1


12  

I managed to make the binding work by setting the ng-model in the template as

我设法通过在模板中设置ng-model来进行绑定工作

ng-model="$parent.ngModel"