angular-directive | 易学教程

AngularJS error: Template for directive 'XXXXXX' must have exactly one root element

阅读更多关于 AngularJS error: Template for directive 'XXXXXX' must have exactly one root element

This is a follow-up to this question . I am trying to build and HTML <table> with multiple <tr> rows. I want some of these rows to be rendered by my directive myDirectiveA and others to be rendered by my directive 'myDirectiveB'. Below you can see what my files look like. It all works fine if there is only one <tr> row in the file path/to/myDirectiveA.template.html . But as soon as I add another row in there, I get the following error: `angular.js:13920 Error: [$compile:tplrt] Template for directive 'myDirectiveA' must have exactly one root element. path/to/myDirectiveA.template.html` Ok, so

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() { document.getElementsByTagName('timer')[0].stop(); } </script> </head> <body> <div> <h2>Plain

Angular Animations : How to bind animation trigger name dynamically in the template?

阅读更多关于 Angular Animations : How to bind animation trigger name dynamically in the template?

I would like to know if there is a way to bind the animation trigger name dynamically in the template. Here is the div to animate in the template app.component.html : <div [@animationTriggerName]> ... </div> Here is the app.module.ts : ... @NgModule({ imports: [...], declarations: [ ..., AnimationTriggerNameDirective ], bootstrap: [...] }) And here is the app.component.ts : @Component({ ... }) export class AppComponent { ... animationTriggerName = 'slideInOut'; } @Directive({ selector: '[animationTriggerName]' }) export class AnimationTriggerNameDirective { @Input() animationTriggerName:

How to activate tooltip when ellipsis is activated using a directive in angular 5?

阅读更多关于 How to activate tooltip when ellipsis is activated using a directive in angular 5?

I have the following template with a "dotdotdot" css class which add ellipsis on overflow correctly. <div class="dotdotdot">{{data.trip.name}}</div> What I'm trying to do here is to implement a directive which add a tooltip when the ellipsis is activated only. Here is the current code from the directive: import { Directive, OnInit, ElementRef } from '@angular/core'; declare var $: any; @Directive({ selector: '.dotdotdot' }) export class DotdotdotDirective implements OnInit { private el: HTMLElement; constructor(elRef: ElementRef) { this.el = elRef.nativeElement; } ngOnInit() { if (this

Angular 4 - how to render 2 decimal places for type='input'

阅读更多关于 Angular 4 - how to render 2 decimal places for type='input'

问题 This question is about restricting/validating the input when the user enters data into an input of type number. The issue I have is that when the model first loads, any numbers that are integers or 1dp, get rendered with only 1dp. eg 40 or 40.0 both show as 40.0 (not as 40.00). I have added this code so that after a user types a new value, it shows with 2dp: in the template file: (change)="setTwoNumberDecimal($event)" in the component file: setTwoNumberDecimal($event) { $event.target.value =

How to add/remove class from directive

阅读更多关于 How to add/remove class from directive

问题 Using a custom directive how would you add/remove a class on the host element based on a specific conditions? Example: @Directive({ selector: '[customDirective]' }) export class CustomDirective { constructor(service: SomService) { // code to add class if (service.someCondition()) { // code to remove class } } } 回答1: If you don't want to use the ngClass directive (Hint: you can pass a function to [ngClass]="myClasses()" if it would be to messy inline in your template) you can just utilize the

How to activate tooltip when ellipsis is activated using a directive in angular 5?

阅读更多关于 How to activate tooltip when ellipsis is activated using a directive in angular 5?

问题 I have the following template with a "dotdotdot" css class which add ellipsis on overflow correctly. <div class="dotdotdot">{{data.trip.name}}</div> What I'm trying to do here is to implement a directive which add a tooltip when the ellipsis is activated only. Here is the current code from the directive: import { Directive, OnInit, ElementRef } from '@angular/core'; declare var $: any; @Directive({ selector: '.dotdotdot' }) export class DotdotdotDirective implements OnInit { private el:

Emit event from Directive to Parent element

阅读更多关于 Emit event from Directive to Parent element

问题 I have an element in HTML template. I add a directive to it: <div myCustomDirective>HELLO</div> I want that whenever I hover over the div the text inside the div should be changed, but it needs to be done from Directive (mouseover) event. I don't know how to emit event from a Directive and capture inside a parent element. Any help is appreciated. This is angular2 project. 回答1: If myCustomDirective has an output @Output() someEvent:EventEmitter = new EventEmitter(); then you can use <div

Emit event from Directive to Parent element

阅读更多关于 Emit event from Directive to Parent element

I have an element in HTML template. I add a directive to it: <div myCustomDirective>HELLO</div> I want that whenever I hover over the div the text inside the div should be changed, but it needs to be done from Directive (mouseover) event. I don't know how to emit event from a Directive and capture inside a parent element. Any help is appreciated. This is angular2 project. If myCustomDirective has an output @Output() someEvent:EventEmitter = new EventEmitter(); then you can use <div myCustomDirective (someEvent)="callSomethingOnParent($event)">HELLO</div> I'd like to add to @GünterZöchbauer's

How to pass values to directive in angular

阅读更多关于 How to pass values to directive in angular

My code, <modal *ngIf='showModal' [imageValue]="imageId"></modal> My model component, @Component({ selector: 'modal', templateUrl: './app/modal/modal.component.html', providers: [HeaderClass] }) export class ModalComponent { imageValue:any; I want to get the value of this 'imageValue' but I dont know how to do it.Can anyone please help me.Thanks. If you want to send data to directive then you should try like this: This is my custom directive, and I am going to share two value from component or HTML to the directive. test.directive.ts: import { Directive, ElementRef, Input, OnInit } from '