创建角度包装器组件

时间:2016-03-01 11:01:32

标签: angularjs components angular-ui-select

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

在我的应用程序中,我有几个声明一遍又一遍地相同。因此,尝试重用一些我想要创建单个指令的代码" my-select"这简单地创建了一个预先配置好的"角-UI-选择。

这是我的模板:

<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'
    }
};

上面的代码几乎就是我提出的,它的工作原理(有点)。

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

是否有其他方法可以实现相同的目标(最好使用角度)?

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

0 个答案:

没有答案