Angular 预编译时在组件上动态添加属性

Question

我有多次使用的组件，准确地说是 58 次。它们之间唯一的区别是添加验证的独特属性。我想要做的是在编译之前向我的模板添加一个属性数组。使用 Angular 组件时可以实现吗？

component.js

(function () {
    'use strict';

    angular
        .module('upaApp')
        .component('component', {
            bindings: {
                inputAttributes: '@',
            },
            controller: controller,
            restrict: 'E',
            templateUrl: 'app/component/component.html'
        });

    function controller() {
        var $ctrl = this;
    }
})();

component.html

<input {{ $ctrl.inputAttributes }}
       class="form-control"
       type="text" />

当我使用组件 <component input-attributes="directive1, directive2"></component> 时，它不会呈现我的字符串，即使它呈现了，我也不确定它是否有效。那么有没有一种方法可以动态地设置 AngularJS 中的属性？

Answer 1

这是 angular 1 还是 2？我假设是前者。

我不知道有什么方法可以将字符串作为属性。作为解决方法，您可以做的是有条件地插入具有 ng-attr- 属性的属性。如果变量不是未定义的，这将插入属性。也许是这样的：

$scope.ctrl.inputAttributes = {
    directive1:undefined, //this one wont show 
    directive2:"this one will show"// as directive2="this one will show"
}

然后在您的标记中：

<input ng-attr-directive1="ctrl.inputAttributes.directive1"
       ng-attr-directive2="ctrl.inputAttributes.directive2"
       class="form-control"
       type="text" />

https://www.thinkingmedia.ca/2015/03/conditionally-add-a-html-element-attribute-value-in-angularjs/

编辑：它可能不干净，但您可以创建一个编译 html 的指令。

app.directive('dynamicAttributes', function ($compile) {
return {
    restrict: 'E',
    scope: {
        attributes: '@'
    },
    link: function (scope, elem, attrs) {
        var h = '<input '+scope.attributes + ' class="form-control" type="text" />';
        elem.replaceWith($compile(h)(scope));
    }
}
});

然后在你的 DOM

<dynamic-attributes attributes="1 2 3"></dynamic-attributes>

fiddle: http://jsfiddle.net/brhardwick/nx16zdrL/1/

Answer 2

实际上我的问题有一个非常简单的解决方案。您可以使用 ng-model 将值发送到组件。当我将指令放在组件上时，它会相应地进行验证，因为它可以从 ng-model 访问值。

Angular 预编译时在组件上动态添加属性

Dynamic add attributes on component in Angular pre compile

angularjs

angular-components