angular-directive | 易学教程

Ellipsis directive with title

阅读更多关于 Ellipsis directive with title

问题 I have an Angular directive that adds styling text-overflow: ellipsis; overflow: hidden; white-space: nowrap; in ngOnInit and then looks something like this: @Directive({ selector: 'ellipsis' }) class EllipsisDirective { ngAfterViewInit() { const el: HTMLElement = this.el.nativeElement; if (el.offsetWidth < el.scrollWidth) { el.setAttribute('title', el.innerText); } } } Usage: <div ellipsis>Some Very Long Text Here</div> The problem: On some pages, the layout/components do not change on a

ng-sidebar (Angular 2) implementation issue

阅读更多关于 ng-sidebar (Angular 2) implementation issue

问题 I need to make use of ng-sidebar to display a collapsible sidebar menu to the left on click on button in header. app.component.html <div class="page-header custom-phead"> <ng-sidebar-container> <ng-sidebar [(opened)]="_opened"> <p>Sidebar contents</p> </ng-sidebar> <div ng-sidebar-content> <button (click)="_toggleSidebar()">Toggle</button> </div> </ng-sidebar-container> <form class="heading"> <input type="text" name="search" [(ngModel)]="search"><input type="image" [src]="'../resource

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 }}" /> <

Angular2 on focus event to add class

阅读更多关于 Angular2 on focus event to add class

问题 I'm looking to update an Angular 1 app to Angular 2 and am having an issue with one of my old directives. The idea is simple. When an input field is focused a class should be added (md-input-focus) and another be removed (md-input-wrapper). Then this process should be reversed on "blur" event - i.e. focus lost. My old directive simply included the lines .directive('mdInput',[ '$timeout', function ($timeout) { return { restrict: 'A', scope: { ngModel: '=' }, link: function (scope, elem, attrs)

Access template variable in *ngIf

阅读更多关于 Access template variable in *ngIf

问题 I am trying to define a template variable on an element and use its hidden attribute to identify whether the element is actually present in the DOM and then display another element based on that. But if there is a structural directive, template variable does not seem to return a value. <hr class="divider" *ngIf="true" #divi> <div *ngIf="showResendWelcomeEmailButton"> <a *wpHasAnyPermission="[{'something': true}]" #resendEmailBtn> Resend Welcome Email </a> </div> <div class="pull-right"> <a

Difference between ngStorage and $window.localStorage

阅读更多关于 Difference between ngStorage and $window.localStorage

问题 What is the difference between ngStorage and $window.localStorage? When is it better to use one instead that the other? I have to choose one of them for a web app. I have to save data of profile user and the token 回答1: This is normal html5 local storage: With local storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can

angular timer directive not working with ionic framework

阅读更多关于 angular timer directive not working with ionic framework

问题 I am having issues with implementing the angular timer directive with the ionic framework. http://siddii.github.io/angular-timer/ When I implement the code using bower or the google cdn I have no issues. <!DOCTYPE html> <html> <head> <title>Plain Javascript Timer Example</title> <script src="../bower_components/angular/angular.min.js"></script> <script src="../app/js/timer.js"></script> <script> function startTimer() { document.getElementsByTagName('timer')[0].start(); } function stopTimer()

Access template variables through directive in angular

阅读更多关于 Access template variables through directive in angular

问题 I am currently working on a directive which simply manipulates the dom elements. I wanted to access to template variables of the element which is the host of the directive, but I was unable to do that, because the result is always undefined. directive: @Directive({ selector: '[sample-directive]' }) export class SampleDirective implements AfterViewInit { @ViewChild('queryMe') queryMe: ElementRef; ngAfterViewInit(): void { console.log(this.queryMe); } } sampleComponent.template.html: <div

What is the calling order of angularjs functions (config/run/controller)? [duplicate]

阅读更多关于 What is the calling order of angularjs functions (config/run/controller)? [duplicate]

问题 This question already has answers here : AngularJS app.run() documentation? (2 answers) Closed 3 years ago . There are controllers constants directives services factory run config filters functions of angular.js . What is the calling order of all these modules? 回答1: Learning this I made a fiddle observing the behaviour by console.log . Its like app config app run directive setup directive compile (app controller dependencies) service factory inner factory inner service app controller filter

Is it possible to crate a Validator for a custom component (not for a FormControl)

阅读更多关于 Is it possible to crate a Validator for a custom component (not for a FormControl)

问题 I am trying to do smth like this @Directive({ selector: '[myVal][myCustomInputToComponent]', providers: [ { provide: NG_VALIDATORS, useExisting: forwardRef(() => MyVal), multi: true } ] }) export class MyVal implements OnInit, Validator { @Input() input: any; constructor(private el: ElementRef) { } ngOnInit(): void { console.log('validator input', this.input); } validate(): { [key: string]: any } { console.log('validate', this.input) return { validatorName: { valid: false } }; } } And