angular-directive | 易学教程

disabling button while ajax request

阅读更多关于 disabling button while ajax request

问题 I have written a directive which would help disabling a button while ajax requests are pending. this is my directive : .directive('requestPending', ['$http', function ($http) { return { restrict: 'A', scope: { 'requestPending': '=' }, link: function (scope, el, attr) { scope.$watch(function () { return $http.pendingRequests.length; }, function (requests) { scope.requestPending = requests > 0; }) } } }]) the html is like : <button request-pending="pending" ng-disabled="pending">Save</button>

Detect when input value changed in directive

阅读更多关于 Detect when input value changed in directive

问题 I'm trying to detect when the value of an input changed in a directive. I have the following directive: import { ElementRef, Directive, Renderer} from '@angular/core'; @Directive({ selector: '[number]', host: {"(input)": 'onInputChange($event)'} }) export class Number { constructor(private element: ElementRef, private renderer: Renderer){ } onInputChange(event){ console.log('test'); } } The problem in this directive is that it detects only when there is an input and not when the value changes

Drag and Drop event using angular4 is not working in IE11

阅读更多关于 Drag and Drop event using angular4 is not working in IE11

I am using a directive to get the files when it is dropped on the HTML element, it is working fine in chrome but it is not working in IE11. the following is the code for the drag and drop event import { Directive, HostListener, Output, EventEmitter } from '@angular/core'; @Directive({ selector: '[appDragDrop]' }) export class DragDropDirective { constructor() { } @Output() FileDragEvent: EventEmitter<File> = new EventEmitter<File>(); @HostListener('window:drop', ['$event']) public onDrop(event) { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer.items[0].type !=

How can I augment a directive's link function with angular's decorator pattern?

阅读更多关于 How can I augment a directive's link function with angular's decorator pattern?

问题 I'm working on an Angular library and looking for a way to extend a directive using the decorator pattern: angular.module('myApp', []).decorator('originaldirectiveDirective', [ '$delegate', function($delegate) { var originalLinkFn; originalLinkFn = $delegate[0].link; return $delegate; } ]); What would be the best way to augment the original directive using this pattern? (Example usage: to have additional watches or extra event listeners on the directive without modifying it's code directly).

How to test a directive with a mouse wheel event in angular 2 / 4

阅读更多关于 How to test a directive with a mouse wheel event in angular 2 / 4

问题 I have a directive which has a mouse wheel event, it is used to zoom in and out a canvas. I would like to know how can I write a unit test for such an event. I couldn't find any example online, could anyone point me in a right direction? My directive: import { Directive, ElementRef, HostListener} from "@angular/core"; import { MyService } from "./my-service"; @Directive({ selector: "[testDirec]" }) export class Test { private initPointX: number; private initPointY: number; constructor(private

Angular 4 directive error: Can't resolve all parameters for directive

阅读更多关于 Angular 4 directive error: Can't resolve all parameters for directive

问题 I'm totally new to Angular and trying to inject basic structural directive from Angular guide. Here is my directive: import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[pcDropdown]' }) export class DropdownDirective { private hasView = false; constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private items ) { } @Input() set pcDropdown(condition: boolean) { if (!condition && !this.hasView) { this

Angular Dropdown directive doesn't work

阅读更多关于 Angular Dropdown directive doesn't work

I am using Angular 6.0.5 alongside with Bootstrap 4.1.1 and I added a directive for dropdowns. But I can't make it work in no way. I have seen a lot of similar problems here but none was for Bootstrap 4. this is the dropdown html: <div class="btn-group" appDropdown> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Manage <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a class="dropdown-item" style="cursor: pointer" (click)="OnAddToShoppingList()">To Shopping List</a></li> <li><a class="dropdown-item" href="#">Edit Recipe</a></li> <li><a

How to update Directive on State Changes

阅读更多关于 How to update Directive on State Changes

I have a root state that defines the overall structure of the Angular template. In the root state, I have the sidebar included that has dynamic menus via directive that changes based on the state. Like this: .state(‘root', { abstract: true, url: ‘/root', templateUrl: ‘views/root.html', }) root.html includes the sidebar.html that has dynamic menu called through Directive like this: sidebar.html <ul class="nav" id="side-menu"> <li class="nav-header"> <img alt="avatar" ng-src="{{ avatar }}" /> </li> <!—Dynamic Menus Directive --> <li sidebar-menus></li> </ul> The directive shows the menu based on

disabling button while ajax request

阅读更多关于 disabling button while ajax request

I have written a directive which would help disabling a button while ajax requests are pending. this is my directive : .directive('requestPending', ['$http', function ($http) { return { restrict: 'A', scope: { 'requestPending': '=' }, link: function (scope, el, attr) { scope.$watch(function () { return $http.pendingRequests.length; }, function (requests) { scope.requestPending = requests > 0; }) } } }]) the html is like : <button request-pending="pending" ng-disabled="pending">Save</button> Wanted to know whether this is a right way of doing it. I want to refrain from using $watch Thank you.

AngularJS - Multiple Directive Instances making XHR call multiple times

阅读更多关于 AngularJS - Multiple Directive Instances making XHR call multiple times

I have an Angularjs directive 'ExampleDirective' which has the controller 'ExampleController'. The controller defines two Promise objects where each Promise object makes an Http GET request and returns the response. In the directive, we get the response data from the promise objects and process them to render the directive. ExampleDirective gets instantiated twice within the same view and each instance makes it's own Http GET requests. This causes performance issues on the front end due to two requests sent at the same time to make expensive database calls and read from the same table as well.