Javascript 通用角度组件-可选绑定

我想创建一组通用组件（angular 1.5），其中包含多个可选绑定，可在多个应用程序中使用

我担心它会为不使用大多数可选绑定的应用程序创建许多不必要的观察者

例如：

组件声明：

let dateRangeComponent = {
    bindings: {
        label: '@',
        name1: '@',
        name2: '@',
        model1: '>?',
        model2: '>?',
        extra1: '>?'
    },
    template: `<div ng-if="$ctrl.model1>stuff</div>
               <div ng-if="$ctrl.model2>stuff</div>
               <div ng-if="$ctrl.extra1>stuff</div>`
};

<date-rage-component label="Pretty Date" name1="Start" name2="end"/>

让dateRangeComponent={
绑定：{
标签：“@”，
名称1:“@”，
名称2:“@”，
模型1:“>？”，
模型2:“>？”，
附加1:“>？”
},
模板：`东西
我将利用
模板
属性可以是一个
函数（tElem，tAttrs）{…}
（），该函数返回一个字符串以根据当前属性修改模板

我这样做的方法是使用jQuery和一些自定义元素来指示模板的哪些部分是有条件的

下面是一个快速示例模板函数：

function template($element, $attrs) {
  var fullTemplate = $('<div><if-attr name="a"><div ng-if="$ctrl.a"></div></if-attr></div>');
  fullTemplate.find('if-attr').each(function() {
    if (attrs.hasOwnProperty($(this).attr('name'))) {
      $(this).replaceWith(this.innerHTML);
    } else {
      $(this).remove();
    }
  });
  return fullTemplate[0].outerHTML;
}

或

另一个建议是不要创建通用组件。相反，将业务逻辑推迟到服务，并创建特定组件。让使用者代码根据其需要决定使用哪个组件。如果您在多个组件之间共享了许多常见行为，则可以将服务注入组件中以重用考虑到将业务逻辑分成多个服务，并使用层次化设计来重用代码，但根据具体情况允许使用规范。将共享代码推送到抽象服务并将其扩展到具体服务中。将具体服务注入到您的组件中。请高兴：：P> >好的方法是@ GR的答案。egL，使用具有不同属性的不同模板，但也可以使用
ng attr-[nameCustomAttr]=“value”
，对于可选绑定，请参阅my，这样可以一次性使用一种类型的绑定，检查属性是否有值，并根据值添加或不添加属性

为此，属性需要保留在指令/组件的模板上

注意：angularjs仅为UI中出现的变量创建监视

好吧，祝你好运，我希望这对你有所帮助。
你只需要保持与{{：：variable}}的一次绑定就可以避免多个观察者。这样你就不会面临任何性能问题。
你需要在组件调用后销毁组件绑定

如果您需要更多详细信息，请检查并让我知道

您能告诉我您使用了哪种工具来检查观察者的数量吗？您是如何做到的？我在角叉中的$digest函数中添加了一些计数器和console.logs（）。
function template($element, $attrs) {
  var fullTemplate = $('<div><if-attr name="a"><div ng-if="$ctrl.a"></div></if-attr></div>');
  fullTemplate.find('if-attr').each(function() {
    if (attrs.hasOwnProperty($(this).attr('name'))) {
      $(this).replaceWith(this.innerHTML);
    } else {
      $(this).remove();
    }
  });
  return fullTemplate[0].outerHTML;
}

template: ['$element', '$attrs', function ($elem, $attrs) { 
    // ...
}],

function templateFn($elem, $attrs) { 
    // ...
}
templateFn['$inject'] = ['$element', '$attrs'];

template: templateFn,