3

我正在尝试为 angular-ui 选择创建一个包装器组件/指令。

在我的应用程序中，我有几个声明一遍又一遍地等同于同一件事。因此，尝试重用一些代码我想创建一个指令“my-select”，它只是创建一个“预配置的”angular-ui-select。

这是我的模板：

<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>

以及组件定义：

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

上面的代码几乎就是我想出的，它可以工作（有点）。

问题是数据绑定被过度使用，并且使用包装器会严重影响性能。此外，项目的双重绑定似乎也会影响原始组件的行为（并不总是按预期工作）。

有没有另一种方法来实现同样的事情（最好使用角度）？

我正在使用 Angular 1.5 和 angular-ui-select 的最新版本。

4

0 回答 0