3

I'm trying to create a wrapper component/directive for a angular-ui select.

In my applications I have several declarations that amount to the same thing over and over again. So, trying to reuse some code I want to create a single directive "my-select" that simply creates a "preconfigured" angular-ui-select.

This is my template:

<ui-select ng-model="$ctrl.ngModel" class="my-select" >
<ui-select-match placeholder="{{::$ctrl.placeholder}}">{{$select.selected.label}}</ui-select-match>
<ui-select-choices repeat="item in $ctrl.items | filter: $select.search">
    <div ng-bind="item.label"></div>
</ui-select-choices>

And the component definition:

    export var SelectComponent = {
    controller: SelectComponentController,
    templateUrl: 'common/select/Select.tpl.html',
    bindings: {
        items: '=',
        ngModel: '=',
        placeholder: '='
    },
    require: {
        ngModelCtrl: 'ngModel'
    }
};

The above code is pretty much what I came up with and it works (sort of).

The problem is that databinding is overused and that performance is seriously impacted by using the wrapper. Furthermore the double binding on items seems to impact the original component's behaviour as well (doens't always work as expected).

Is there another way to achieve the same thing (preferably using angular)?

I'm using Angular 1.5 and the latest version of angular-ui-select.

Mike
  • 1,003
  • 1
  • 11
  • 23
  • I see no reason to use bidirectional bindings for all scope members here. – Estus Flask Mar 01 '16 at 12:41
  • @estus, Care to elaborate a bit? – Mike Mar 02 '16 at 06:41
  • You care about performance, and the first thing to start are '=' bindings, it looks like they are only required for ngModel. There is no other way to do this, unless you want to reimplement uiSelect and ngRepeat functionality by yourself (you possibly don't). – Estus Flask Mar 02 '16 at 11:22

0 Answers0