angular-directive

问题 I'm using angular4 and trying to create a router link. The router link works but displays the template twice. Below is my code in the component: import { Component } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-root', template: ` <h1>Contacts App</h1> <ul> <li><a [routerLink]="['/facebook/top']">Contact List</a></li> </ul> <router-outlet></router-outlet> ` }) export class AppComponent { constructor( private route: ActivatedRoute,

问题 I have a compiled directive that contains an angular-charts.js directive in it. I've noticed that when the container of that chart has ng-show or ng-hide as an attribute, the chart wont update -- it just doesn't show at all. Here is a plunker that demonstrates this (see listeningComponent in scripts.js directive) 回答1: Here the problem is not with the ng-show and ng-hide attribute. The root cause behind this is is DOM manupulation. Here ng-show condition is executing first and directive is

问题 I have a compiled directive that contains an angular-charts.js directive in it. I've noticed that when the container of that chart has ng-show or ng-hide as an attribute, the chart wont update -- it just doesn't show at all. Here is a plunker that demonstrates this (see listeningComponent in scripts.js directive) 回答1: Here the problem is not with the ng-show and ng-hide attribute. The root cause behind this is is DOM manupulation. Here ng-show condition is executing first and directive is

问题 I have a component that uses content projection. <ng-content select="button"> </ng-content> I want to do something like this in my component: @ContentChild('button') button: ElementRef; However, when I check this.button , it is undefined both in ngAfterViewInit and ngAfterContentInit . How can I select my content child if it is a native element and not a custom component? 回答1: None of the query decorators can select native elements without a reference. @ViewChild('button') @ViewChildren(

问题 I have a component that uses content projection. <ng-content select="button"> </ng-content> I want to do something like this in my component: @ContentChild('button') button: ElementRef; However, when I check this.button , it is undefined both in ngAfterViewInit and ngAfterContentInit . How can I select my content child if it is a native element and not a custom component? 回答1: None of the query decorators can select native elements without a reference. @ViewChild('button') @ViewChildren(

问题 I have a working implementation of the ngx-translate library for Angular, based on several .json files (for example, stored in assets/i18n/en.json ). I want to achieve the following: There is always a default JSON (for example de.json ) and additionally always specific JSON files (for example de_specific.json ) that only contain specific translations using the same keys as the respective default JSON. If there is e.g. a translation in the default de.json with "Home": "Startseite" , then the

问题 I am using jest.js for testing with my angular app. here is the directive I use in html: <textarea errorHighlighter formControlName="Url" name="Url" cols="50" rows="5" placeholder="Enter Page URL" (ngModelChange)="pageUrlChanges($event)"></textarea> here is my directive.ts file: import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2 } from '@angular/core'; import { NgControl } from '@angular/forms'; @Directive({ selector: '[errorHighlighter]' }) export class

问题 I am working on an AngularJS tutorial This tutorial covers the ng-repeat directive, an AngularJS directive used repeating data. To show an example of ng-repeat, The author enters periodic table elements in a JSON format, covering element's name, element #, etc into controller logic($scope) To display the elements(code below), the author simply used the directive with a html un-ordered list <ul> <li data-ng-repeat="element in periodic.elements">{{element.name}} </li> </ul> I tried doing the

问题 I have quite complex infrastructure in my project which contains of host component structural directive used in host component's template (MyDir) another component used in structural directive (MyComp) host component @Component({ selector: 'my-app', template: ` <table> <tr *myDir="let item of data"> <td>{{item.text}}</td> </tr> </table>` }) export class AppComponent { data = [ { text: 'item 1' }, { text: 'item 2' } ]; } structural directive import { MyComp } from './myComp'; @Directive({

问题 I get an error below and I don't understand why. Any ideas? html, <button ng-click="loadForm()">Load Directive Form</button> <div data-my-form></div> angular, app.directive('myForm', function() { return { replace:true, controller:function($scope){ $scope.isLoaded = false; $scope.loadForm = function(){ $scope.isLoaded = true; } }, template: '<div ng-if="isLoaded" ng-include="\'form.php\'" ></div>', link:function(scope, element) { } } }); error, Error: [$compile:multidir] Multiple directives