使用指令绑定属性

Posted 2023-03-13

【中文标题】使用指令绑定属性

【英文标题】：Binding attributes using Directives

【发布时间】：2016-11-04 23:10:22

【问题描述】：

我正在尝试使用 Angular 和 TypeScript 更改内联 SVG 中属性的填充颜色。这个想法是SVG有一个“TA”属性；任何具有这些“TA”属性之一的 svg 元素，我想将填充颜色更改为从下拉列表中绑定到用户定义的颜色。但是，我很难弄清楚如何将此属性更改为动态绑定。

这是我的尝试：

export class TaDirective implements ng.IDirective 

static create_instance() : ng.IDirective 
    return new TaDirective();


constructor()


public bindToController = true;
public controllerAs = "ctrl";
public scope =  name: '=' ;

public compile(element: ng.IAugmentedJQuery, attrs: ng.IAttributes, transclude: ng.ITranscludeFunction) 
    var ta = attrs.$attr["ta"] as string

    var ele = element[0];
    attrs.$set

    // Make all visable (works as expected)
    attrs.$set('visibility', "visible")

    // Attempt to bind to the controller's fill
    attrs.$set('fill', " ctrl.fill ")
    //attrs.$set('fill', 'cyan') // Verify idea works


public link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, controller: any, transclude: ng.ITranscludeFunction) 
    //Tried code here



public controller(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes)
    // Tried code here



app.directive('ta', TaDirective.create_instance);

这是一个Plunker，带有 TypeScript 和已编译的 javascript。

编辑 所以我想出了如何做到这一点，但它仍然不优雅，因为范围的名称是硬编码的。我愿意接受有关如何将两者分离的建议。 （Plunker 也更新了）

export class TaDirective implements ng.IDirective 
    static create_instance() : ng.IDirective 
        return new TaDirective();
    

    constructor()
    

    public link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, controller: any, transclude: ng.ITranscludeFunction) 
        var ta = attrs.$attr["ta"] as string

        var ele = element[0];

        // Make all visable
        attrs.$set('visibility', "visible")

        // Attempt to bind to the controller's fill
        scope.$watch('vm.fill', function(newFill) 
            attrs.$set('fill', newFill)
        )
    

【问题讨论】：

我们应该在演示中看到什么？圈子好像变了

中间有一个三角形，所有文字也应该改变，除了圆圈

【参考方案1】：

将控制器与指令监视表达式解耦的常见做法是监视指定的属性。

而不是以下：

JS：

scope.$watch('vm.fill', function (fill) 
    attrs.$set('fill', fill);
);

html：

<text ta="1">Text</text>

你应该有：

JS：

scope.$watch(attrs.ta, (fill: string): void => 
    attrs.$set('fill', fill);
);

HTML：

<text ta="vm.fill">Text</text>

这种做法可确保您的指令更具可扩展性，因为vm.fill watch 表达式未绑定到指令链接函数，而是通过角度模板传递到指令中。 Here is an updated plunkr.