如何在 angular 指令 4 中使用范围

Question

Hello All 我正在使用 angular 指令 1.6 访问数字文本框控件的 ate 属性这是我的指令

app.directive('numerictextbox', function () {
    return {
        restrict: 'EA',
        require: 'ngModel',
        replace: true,
        template: '<input type="number" />',

        scope: {
            id: '@',
            ngModel: '=',
            min: '@',
            max: '@'
        },
        link: function (scope, element) {

            element.on('change', function () {
                scope.ngModel
                scope.$applyAsync();

            })
        }

    };

这是我的控件

<numerictextbox id="txtid2" min="1" max="4" ng-model="txt2"></numerictextbox>

所以问题是如何在 angular 指令中获取控件属性值这里是我的 angular 4 指令

@Directive({
        selector: '[number]'

})

我们如何在 angular 4 指令中使用作用域任何人请帮助

Answer 1

使用 @Input() 装饰器将属性添加到指令 class 中

@Directive({
    selector: '[selectable]'
})
export class SelectableDirective{
    private el: HTMLElement;

    @Input('selectable') option:any;   
    @Input('first') f;
    @Input('second') s;

    ...
}

并在模板中将绑定属性传递给您的 li 元素

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [first]='YourParameterHere'
    [second]='YourParameterHere'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>

我已经在这个 way.This 中实现了，在我的 project.Please 中运行良好。

如何在 angular 指令 4 中使用范围

how to use scope in angular directive 4

html

jquery

angular-directive

angular