angular-directive | 易学教程

Angular gives @angular/core 404 not found error when using directives

阅读更多关于 Angular gives @angular/core 404 not found error when using directives

问题 When I add in this line of code into my @Component : directives: [HeroDetailComponent] The code breaks, and gives me this error: GET http://localhost:3000/@angular/core 404 (Not Found) These are the scripts in my index.html : <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/angular2/bundles/angular2

How is Angular's *ngFor loop implemented?

阅读更多关于 How is Angular's *ngFor loop implemented?

问题 I wonder how does Angular's *ngFor directive actually work under the hood? I would like to know the whole process that happens when I use the directive. For downvoters : I've seen the ng-for-of file, although there is no single usage of passed to *ngFor array's e.g. join() method that I know is invoked. Thanks for your support :) Here is the plunker that shows the behavior: https://plnkr.co/edit/IXVxWrSOhLBgvSal6PWL?p=preview 回答1: Here is a high level overview. Suppose you define your

How to extend/inherit components?

阅读更多关于 How to extend/inherit components?

I would like to create extensions for some components already deployed in Angular 2, without having to rewrite them almost completely, as the base component could undergo changes and wish these changes were also reflected in its derived components. I created this simple example to try to explain better my questions: With the following base component app/base-panel.component.ts : import {Component, Input} from 'angular2/core'; @Component({ selector: 'base-panel', template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>', styles: [` .panel{

Angular 2 - How does ng-bootstrap provide the NgbRadioGroup and NgbButtonLabel to their NgbRadio directive?

阅读更多关于 Angular 2 - How does ng-bootstrap provide the NgbRadioGroup and NgbButtonLabel to their NgbRadio directive?

问题 Here is the label code: import {Directive} from '@angular/core'; @Directive({ selector: '[ngbButtonLabel]', host: {'[class.btn]': 'true', '[class.active]': 'active', '[class.disabled]': 'disabled', '[class.focus]': 'focused'} }) export class NgbButtonLabel { active: boolean; disabled: boolean; focused: boolean; } and here is the radio button code: import {Directive, forwardRef, Input, Renderer2, ElementRef, OnDestroy} from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from

Directive to get files input with ng-model [duplicate]

阅读更多关于 Directive to get files input with ng-model [duplicate]

This question already has an answer here: ng-model for `<input type=“file”/>` (with directive DEMO) 12 answers Guyz i have an issue with my code i don't know why when i tried to get file from <input ng-model="form.userfile" id="itemImage" name="userfile" type="file"> that code will not give me the values. my code: HTML: <div class="panel panel-default"> <div class="panel-body"> <form id="form" accept-charset="utf-8" ng-submit="sendmessage()"> <textarea ng-model="form.message" name="message" onkeypress="process(event, this)" id="text" class="form-control send-message" rows="3" placeholder=

How to access host component from directive?

阅读更多关于 How to access host component from directive?

问题 Say I have the following markup: <my-comp myDirective></my-comp> Is there any way I can access the component instance from the directive ? More specifically I want to be able to access the properties and methods of MyComponent from MyDirective , ideally without adding anything to the HTML above . 回答1: You can just inject it class MyDirective { constructor(private host:MyComponent) {} A severe limitation is, that you need to know the type of the component in advance. See also https://github

is there any alternative for ng-disabled in angular2?

阅读更多关于 is there any alternative for ng-disabled in angular2?

I am using angular2 for development and was wondering if there is any alternative for ng-disabled in angular2. For ex. below code is in angularJS: <button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >> {{libraries.name}}"> <i class="fa fa-chevron-right fa-fw"></i> </button> Just wanted to know How can I achieve this functionality? any inputs? To set the disabled property to true or false use <button [disabled]="!nextLibAvailable" (click)="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib"> {{libraries.name}}"> <i

Setting view value an input field in a unit test of an angular form directive

阅读更多关于 Setting view value an input field in a unit test of an angular form directive

问题 I have a directive that builds a form: app.directive('config', function() { return { restrict: 'E', scope: { data: '=' }, template: '<form name="configForm">' + '<input type="number" max="10" ng-model="config.item" name="configItem"/>' + '<div class="form-error" ng-show="configForm.$error.max">Error</div>' + '</form>', controller: 'ConfigDirectiveController', }; }); What I want to do is validate via a unit test that the error message will show up given some input. With angular 1.2 I could

How to apply multiple template bindings on one element in angular [duplicate]

阅读更多关于 How to apply multiple template bindings on one element in angular [duplicate]

问题 This question already has an answer here: *ngIf and *ngFor on <td></td> element [duplicate] 4 answers I'm using template like following: <ul [ngClass]="{dispN: !shwFilter,'list-group':true,'autoS':true,'dispB':shwFilter,'myshddw':true}" style=";display: none"> <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff"> <div *ngIf="valm1 && valm1.type=='1'"> <h5

Angular 1.5 component vs. old directive - where is a link function?

阅读更多关于 Angular 1.5 component vs. old directive - where is a link function?

问题 I've been reading this nice recent article about new .component() helper in Angular 1.5, which is supposed to help everyone to migrate to Angular 2 eventually. Everything looks nice and simple, but I couldn't find any information about DOM manipulation inside components. There is a template property though, which can be a function and accept $element and $attrs arguments. Still it's not clear to me if that's the replacement for a link function. It doesn't seem so. 回答1: EDIT 2/2/16: The 1.5