angular-directive

问题 I have been struggling to figure out the best way to dynamically change the background-image attribute in a number of Angular 2 components. In the following example, I am attempting to set the background-image of a div to an @Input value using [ngStyle] directive: import {Component, Input} from '@angular/core'; import { User } from '../models'; // exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app) export type UserInput = User; @Component({ selector:

问题 I have a table in which I want to display a table row, which is a component. And also I want to pass data to that component: <table> <th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </th> <tr> <my-component [data1]="data1" [data2]="data2"></my-component> </tr> <tr *ngFor="let item of list"> {{item}} </tr> </table> In my-component , the HTML is a few <td></td> with data rendered from data1 and data2 . But after rendering it, because of <my-component></my-component> my CSS is breaking

问题 I have the following code: angular .module('myApp') .directive('layout', function () { return { restrict: 'E', template: '<div ng-include="layoutCtrl.pageLayout"></div>', controller: 'LayoutController', controllerAs: 'layoutCtrl', bindToController: true, scope: { pageLayout: '=', pageConfiguration: '=', isPreview: '=' } }; }); angular .module('myApp') .controller('LayoutController', LayoutController); function LayoutController($scope, LayoutDTO, LayoutPreviewDTO) { var self = this; self

问题 I am trying to validate a typical new password and confirm password match using an Angular Directive . The error message is not shown even though the directive correctly catches a mis-match: Template Form <form> <md-input-container class="signup-full-width"> <input mdInput autocomplete="off" type="password" name="password" #currentPasswd="ngModel" placeholder="Current password" [(ngModel)]="currentPassword" required> <md-error *ngIf="currentPasswd.errors && (currentPasswd.dirty ||

问题 I'm a newbie at Angular, so don't be surprise if the answer to this question is pretty basic. I'm trying to encapsulate a map in a directive, the map will have some custom behavior: I want it to communicate with a Service to retrieve all the points related to a merchant . So I want to pass the merchant as a parameter to the directive: This is the HTML: <div ng-app="myApp"> <div ng-controller="Ctrl1"> <p>Ctrl 1: {{merchant1}}</p> <map merchantDetails="{{merchant1}}"></map> </div> </div> This

问题 I am trying to create an angular directive that does two things. 1. change border of the host element 2. append a button at the end of the host element As of now i am on the first step where i have to set the border of host element. HTML <div *myDirective <h1> some value </h1> </div> Directive export class MyDirective{ constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { this.templateRef.elementRef.nativeElement.style['border'] = '1px solid red'; this

问题 Why i defined 'sayHi' in the controller, and it does not display in the template? js: (function(){ var app = angular.module('myApp', []); app.directive("directive1", function(){ return { restrict : 'E', scope: { }, link : function($scope){ }, controller: ['$scope', function($scope){ $scope.sayHi = 'hi'; window.console.log($scope.sayHi); }] }; }); })(); html: <div style="border: 1px solid; padding: 10px; min-height: 100px;"> Directive1 : <directive1> {{sayHi}} </directive1> </div> detail plnkr

问题 Here is my directive: import { Directive, HostListener, ElementRef, Renderer, Input } from '@angular/core'; @Directive({ selector: '[carouselDirective]' }) export class CarouselDirective { @Input() carouselDirective:any; constructor( private el : ElementRef, private renderer: Renderer ) { console.log(el.nativeElement); //how to add the click / hover events to it's childrens? } @HostListener('click') onClick() { window.alert("onClick"); } @HostListener('mouseover') onHover() { window.alert(

问题 I have a directive function scope.automaticallySelectClosingTime() . It takes the value of first selected dropdown value and creates a list of time on the second select drop-down. It triggers on ng-change . Directive: .directive('closingTimeSync', function() { return { template: `<md-select ng-disabled="time.uiStoreOpen === false" ng-model="openCloseSet[1]"> <md-option ng-repeat="uiTime in closingTimes" ng-value="uiTime.msValue"> {{::uiTime.display}} </md-option> </md-select>`, replace: true,

问题 What is the main difference of <p [ngStyle]="getStyle()"> // getStyle returns a string like "color:blue" and some other attributes to <p appStyle [status]="myStatus"> //directive get myStatus as a input and calculate the style of the tag The application that I'm doing maintenance call these functions getStyle on ngStyle a lot (probably 5k times). I am currently changing the style calculation to directives, because I think its cleaner. But I don't know how much it will affect performance. How