angular-directive

问题 I want to display some custom component/html between two rows on click. I believe the quick and easy solution would be to use the event from the click handler and manipulate the DOM directly however I'd like to do it the angular way if possible. For inspiration I first looked at this article on extending structural directive. It was of limited use though since *matRowDef isn't supposed to be used on its own, but in conjunction with other elements as part of the material table. I then went to

问题 I am using introJS to have a user guide. I can show various features, however, i want to add a directive to the markup e.g: $scope.IntroOptions = { steps: [ { element: "#step1", intro: "Click the button: <button my-directive>Test Directive</button>", position: 'left' } ], With the above, i can see the text 'Click the button' plus a default button. myDirective.js var myDirective = function () { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() {

问题 I'm working on a map application using D3 and Angular, and I'm having an issue showing scope values in a template from an on-click event. My directive: angular.module("maineMap") .directive("ngMap", ["appConfig", function(config){ function countyClickHandler(d, i, scope){ scope.currentCounty(d.properties.fips); console.log(scope.countySelection); } function initMap() { //.... other code g.append("g") .attr("class", "counties") .selectAll("path") .data(scope.mapData.features) .enter() .append(

问题 I may just be attempting to combine too many "new-to-me" concepts at once, but I am trying to write a custom Angular directive using a TypeScript class. At the moment, I'm not trying to do anything terribly useful, just a POC. I have a TypeScript file that looks like this: module App { 'use strict'; export class appStepper { public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void; public template:string = '<div>0</div><button>-</button><button

问题 I have a component with click . <my-box (click)="openModal()"></my-box> When I click this element, openModal function will run. And I'd like to give 1000ms throttle time in order to prevent opening multiple modals. My first approach was using Subject (from rxJs) //html <my-box (click)="someSubject$.next()"></my-box> //ts public someSubject$:Subject<any> = new Subject(); ...etc subscribe But I feel it's a bit verbose. Next Approach was using a directive . I modified a bit of code that I found

问题 in the new project I'm working on I've started using the components instead of directives. however, I've encountered an issue where I cannot find a concrete standard way to do it. It's easy to notify an event from child to parent, you can find it on my plunkr below, but what's the correct way to notify a event from parent to child? Angular2 seems to solve this issue by using something like this: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local

问题 How to create a range directive which binds to one ng-model and outputs two input fields using a filter (already made). Essentially I've got one direction from model to input working, but the other side from input to model not. How to achieve this? I've got this Html: <div tu-range ng-model="arbitraymodel" /> And a model: var arbitrarymodel = "10/22"; Side note; I created a filter to split those two values: {{ feature.Value | split:\'/\':0}} And this directive: .directive('tuRange', function(

问题 I know that in ng2 we have ComponentFactoryResolver that can resolve factories that we can apply to a ViewContainerRef . But, is there something similar for directives? a way to instantiate them and apply them to the projected content from a component? 回答1: No, directives can't be added or removed dynamically. They are only applied to HTML statically added to component templates. What you could do is to enable/disable the directive by passing a parameter ( @Input() ) to the directive to

问题 My firsthtml, <modal [hero]="imageId"></modal>--> My first.component.ts, export class CommonComponent { photodata:any; imageId:any = '2'; } My model.component.ts, @Component({ selector: 'modal', templateUrl: './app/modal/modal.component.html', providers: [HeaderClass] }) export class ModalComponent implements OnInit { @Input() hero: string; console.log(hero)--->Undefined constructor(){ console.log(this.hero)---->undefined } ngOnInit(){ console.log(this.hero)---->2 } } Here when I console it

问题 I have a custom validation for password app.directive('userPassword', function() { return { restrict: 'A', require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$validators.myValidator = function(modelValue, viewValue) { var msg = helper.validation.user.localPassword(modelValue) ctrl.$error.message = msg ctrl.required = helper.validation.user.localPassword() return ! msg } } } }) This is my password html: <div class="my-form-group"> <label for="signup_password">Password:</label>