如何包裹/截取Angular范围值

How to wrap/intercept an Angular scope value

本文关键字：截取 Angular 范围 何包裹 包裹      更新时间：2023-09-26

我正在尝试使用Angular多选指令（具体为isteve/Angular multi-select）作为多选接口组件。它的问题是，它返回的数据是所选对象的完整数组，而我们更愿意使用对象的简化版本，例如ID数组。由于这个组件已经被我们自己的抽象指令包装了，所以我想找到一些方法，在修改子作用域值时拦截它，然后通过包装器指令上的ngModel作用域属性返回减少的值。

指令定义

angular.module('cw-ui').directive('cwSelect', function() {
    return {
        scope: {
            ngModel: '=',
            options: '=',
            maxLabels: '@?',
            selectionMode: '@?',
            onClose: '&'
        },
        templateUrl: 'UI/Directives/select',
        compile: function(element, attributes) {
            if(attributes.maxLabels === undefined) {
                attributes.maxLabels = 3;
            }
        }
    };
});

包装指令模板

<isteven-multi-select input-model="options" output-model="ngModel" button-label="icon name" item-label="icon name maker" tick-property="ticked" group-property="msGroup" max-labels="{{::maxLabels}}" selection-mode="{{selectionMode}}" on-close="onClose()"></isteven-multi-select>

不要完全遵循，但一种不那么优雅的方法是监视由isteven指令修改的模型值，然后将数据打包到其他模型对象中，供您自己的指令使用。

相关文章：