angular-directive | 易学教程

Template parse errors: Can't bind to DIRECTIVE since it isn't a known property of 'div'

阅读更多关于 Template parse errors: Can't bind to DIRECTIVE since it isn't a known property of 'div'

问题 I have looked at the questions regarding this error, and have not found a solution. I have a highlight directive, and I take an input index . This directive works when I declare it in the module I'm using it in. But I want to use it in several modules, So I removed the declaration, and put it inside of my root module that imports the errors. That is when I get the error: Error: Template parse errors: Can't bind to 'index' since it isn't a known property of 'div'. (" <div class="read row"

Angular2 + ng2-material import

阅读更多关于 Angular2 + ng2-material import

I'm using angular 2 with ng2-material to display radio and checkbox components, in each component I see that I have to import all the ng2-material contents and finally using only one component => the result, it charges my app and makes it slower. I want to know if I may import only the component that I need, despite that in the ng2-material documentation they are importing all of them ??? import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "ng2-material/all"; <<<<< import {ROUTER_DIRECTIVES} from

Angular 2: Add directive to dynamically created component(s)

阅读更多关于 Angular 2: Add directive to dynamically created component(s)

问题 I came across the following Plunker to dynamically add and remove components. According to the above link and from many other SO posts, I know how to access Input and Output properties: this.compRef.instance.someProperty = 'someValue'; this.compRef.instance.someOutput.subscribe(val => doSomething()); And I also have a directive "appFont". import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appFont]' }) export class HighlightDirective { constructor(el: ElementRef) {

AngularJS: How do I call a function defined in a directive's scope from a controller?

阅读更多关于 AngularJS: How do I call a function defined in a directive's scope from a controller?

I need to call a function which belongs to the $scope of a ng-directive used in my Angular application. Let's say the directive is defined like this: .directive('my-directive', ['$document', '$timeout', function ($document, $timeout) { return { restrict: 'E', replace: true, scope: { // .... }, controller: ['$scope', function ($scope) { $scope.myFunction= function (mouseEnter) { // ... }; } }; }]); I need to call myFunction from my controller (let's call it my-controller ) which is the controller of the view where my directive is placed. Is it possible to do it? (eventually modifying the

Jasmine - Unble to get DOM elements

阅读更多关于 Jasmine - Unble to get DOM elements

问题 I am testing an angularjs directive that manipulates the DOM. I am trying to get the element in my Jasmine spec, so that I can test the functionality of the directive. However, when I use document.getElementsByClassName or TagName or ID , it doesn't return anything. Does anyone have ideas about this? html = document.getElementsByClassName('analog'); console.dir(html); 回答1: If you create a test in headless browser/chrome etc., you could append a dummy object, for example JQuery node, then

Angular2 + ng2-material import

阅读更多关于 Angular2 + ng2-material import

问题 I'm using angular 2 with ng2-material to display radio and checkbox components, in each component I see that I have to import all the ng2-material contents and finally using only one component => the result, it charges my app and makes it slower. I want to know if I may import only the component that I need, despite that in the ng2-material documentation they are importing all of them ??? import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import

angular 4 : custom validator not working

阅读更多关于 angular 4 : custom validator not working

问题 I pulled this example from angular official doc. I noticed that the custom validation is working with the reactive forms but it is not working with template-driven forms. Here is the plunker of the mentioned example the directive: export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): {[key: string]: any} => { const forbidden = nameRe.test(control.value); return forbidden ? {'forbiddenName': {value: control.value}} : null; }; } @Directive({

Angular 2 ngStyle and background-image [duplicate]

阅读更多关于 Angular 2 ngStyle and background-image [duplicate]

问题 This question already has answers here : In RC.1 some styles can't be added using binding syntax (2 answers) Closed 2 years ago . I have a big trouble with Angular 2 ngStyle directive. I can't set background image from base64 encoded file. Now in template.html I have this: <div class="projects_item_wrap" [ngStyle]="{'background-image':'url('+images[i].file+')'}"> Where 'images' is an array of base64 encoded .png files and their names. Console.log of images[3].file give me this (trouble not

AngularJS: How do I call a function defined in a directive's scope from a controller?

阅读更多关于 AngularJS: How do I call a function defined in a directive's scope from a controller?

问题 I need to call a function which belongs to the $scope of a ng-directive used in my Angular application. Let's say the directive is defined like this: .directive('my-directive', ['$document', '$timeout', function ($document, $timeout) { return { restrict: 'E', replace: true, scope: { // .... }, controller: ['$scope', function ($scope) { $scope.myFunction= function (mouseEnter) { // ... }; } }; }]); I need to call myFunction from my controller (let's call it my-controller ) which is the

Angular 2 ngStyle and background-image [duplicate]

阅读更多关于 Angular 2 ngStyle and background-image [duplicate]

This question already has answers here : In RC.1 some styles can't be added using binding syntax (2 answers) Closed 2 years ago . I have a big trouble with Angular 2 ngStyle directive. I can't set background image from base64 encoded file. Now in template.html I have this: <div class="projects_item_wrap" [ngStyle]="{'background-image':'url('+images[i].file+')'}"> Where 'images' is an array of base64 encoded .png files and their names. Console.log of images[3].file give me this (trouble not inside an image, it works perfectly when I use it in img src='...'): Any ideas? Thanks a lot for answers!