angular-directive

问题 I must be approaching this from a false perspective, but here is the problem. I have an async validation directive which uses HttpClient to validate something with the backend. It is almost independent apart from one critical thing – it needs correct HTTP headers to pass authentication on the server side. This is how the constructor looks: constructor( private http: HttpClient, private auth: AuthService, @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[] ) {

问题 I have a user search feature with a debounce directive on the search term field: <mat-form-field> <input matInput [(ngModel)]="searchTerm" (appOnDebounce)="search($event)" placeholder="Search..." autocomplete="off"> </mat-form-field> It is supposed to call the method: search(searchTerm: string): void { console.log('Searching for ' + searchTerm); } The directive is implemented as: @Directive({ selector: '[ngModel][appOnDebounce]' }) export class DebounceDirective implements OnInit, OnDestroy {

问题 I am creating a master-detail page using the Angular UI router. I have been able to make it work - when I click on a master record, the id of this record is appended to the URL and the detail view shows the detail for this record. However I have two questions: Is it possible to make this work without a change in the URL? As I understand it the UI router is all about state changes, not necessarily url changes. However, if I remove the url property from the router state, then detail doesn't

问题 I have made a DatePickerDirective which is working fine as required. But in order to sync the value of the particular input field on which this directive sits, I have to use value and ngModel attribute both. I wish to use only ngModel how can this be achieved gracefully. Form Element <input appDatePicker type="text" required name="title" value="{{holiday.off_date}}" [(ngModel)]="holiday.off_date" class="form-control" placeholder="01/01/2018"> Component File export class HolidayCreateComponent

问题 I have an Single Page Application build using Angular and i am having some issues with the form. Form is using a check box a drop down and two text boxes. first text box (Name) has no validation. check-Box is using a third party plugin called "iCheck". Drop down is using a plugin called "bootstrap-select". Validation is using a library called "Jquery Validation Engine". The plunker is setup here The expected behavior is. In simple words the text box and drop are required if check-box is

问题 I'm trying to get nested directives from a parent directive with @ContentChildren , but not being populated, occurs when parent directive is placed over a component, component template has child directives. example 1 (@ContentChildren not populated) : https://plnkr.co/edit/Zdxp017V3zwNYTOR11dR?p=preview example 2, works fine : https://plnkr.co/edit/ryIomfokiO40Sw8X6Axd?p=preview there any way to make it work example 1? or wait for "some-component" content? thanks in advance 来源： https:/

问题 I have the below directive: @Directive({ selector: '[changeColor]', exportAs:'changeColor' }) export class ColorDirective { constructor(elem: ElementRef, renderer: Renderer2) { renderer.setStyle(elem.nativeElement, 'color', 'red'); } } I have the below template: <h1 changeColor>Hello</h1> This works as expected and displays "Hello" in red. But, when I try to access a reference of the directive I get an error. For example, the below code: <h1 #x=changeColor>Hello</h1> {{x}} produces the below

问题 I am trying to disable double clicking buttons using directives in Angular. Here is my relevant template code: <button (click)="onClickFunction()" appPreventDoubleClick>Add</button> Here is my directive: @Directive({ selector: "[appPreventDoubleClick]" }) export class PreventDoubleClickDirective { count: number = 0; constructor() {} @HostListener("click", ["$event"]) click(event) { ++this.count; if (this.count > 1) { console.log("disabling"); event.srcElement.setAttribute("disabled",true);

问题 I am not using scope in my controller as i use controller as etc.. I have proof of concept that plunker without scope is working 1 way binding is working 2 way binding is NOT working - shows literal value HTML page WORKING Here: {{detail.program.ldcCode}} SHOWS "Here: PNLC" <lcd-code code="{{detail.program.ldcCode}}"></lcd-code> Above passes in 1 way binding of that object/value of PNLC to Directive ! Directive : return { replace: true, restrict: "EA", scope: { code: "@" }, link: function

问题 How to pass directive parameter to its controller? I use directive: <directive value="ctrl.item"></directive> .directive('directive', [ function () { return { restrict: 'AE', scope: { value: '=value' }, templateUrl: 'item.html', controller: 'Item as item' }; }]) I want to read value inside a directive's controller: .controller('Item', [function Item () { console.log(this.value); }]) Is it possible to do using this ? 回答1: Set the bindToController property to true .directive('directive', [