标签: angular-directive
自定义指令在角度模块内不起作用？
在我的应用程序中，我有两个模块。IdentityModule and ServiceModule。它们以延迟加载技术加载。
现在我创建了一个IconSpacerDirective与 绑定的自定义指令app.module.ts。它在我的内部运行良好app.component.ts。
但它在IdentityModule. 我遇到这个错误：
ERROR Error: Uncaught (in promise): Error: Type IconSpacerDirective is part of the declarations of 2 modules: AppModule and IdentityRegistryModule! Please consider moving IconSpacerDirective to a higher module that imports AppModule and IdentityRegistryModule. You can also create a new NgModule that exports and includes IconSpacerDirective then import that NgModule in AppModule and IdentityRegistryModule.
Error: Type IconSpacerDirective is part of the declarations of 2 modules: …2
推荐指数
推荐指数
1
解决办法
解决办法
4320
查看次数
查看次数
Angular 指令检查所有图像是否已完全加载
因此，我的 Angular 应用程序中有一个画廊幻灯片部分，并且我使用 Swiperjs 来处理所有滑动内容。无论如何，为了让 Swiperjs 正常工作，我需要在初始化 Swiperjs 之前加载所有图像。因此我的问题是，如何创建一个指令来查找组件及其子组件中的所有图像并检查所有图像是否已加载？
到目前为止，我有一个指令检查父组件中的所有图像标签GalleryComponent并记录“Img Loaded”。以下是我的指令：
import { Directive,ElementRef, HostListener } from '@angular/core';
@Directive({
selector: 'img'
})
export class ImagesLoadedDirective {
constructor(public elementRef:ElementRef) { }
@HostListener("load") imageLoaded() {
console.log("img loaded");
/* Can I do something like "return true" for every image that loaded? And how would I register that in my Gallery Component*/
}
}我已将该指令包含在我的GalleryComponent文件中：
@ViewChildren(ImagesLoadedDirective) images:QueryList<ImagesLoadedDirective>;我想下一步是以某种方式保存已加载的每个图像，一旦完成，
我可以说类似的话this.allImagesLoaded = true，然后初始化 Swiperjs？感谢任何意见。
2
推荐指数
推荐指数
1
解决办法
解决办法
2529
查看次数
查看次数
我在角度项目中有多个 ngFor 使用 trackBy:trackByFunction 与单个函数或创建多个函数？
trackByFunction (index, items) {
return item.id;
}
trackByABCtList(index, item) {
return item.id; // or item.id
}
trackByEmployeelist(index, item) {
return item.id; // or item.id
}
trackByTags(index, item) {
return item.id; // or item.id
}
trackByGroup(index, item) {
return item.id; // or item.id
}
trackByEmployeesrange(index, item) {
return item.id; // or item.id
}
trackByDepartment(index, item) {
return item.id; // or item.id
}
trackByFeedbackQuestion(index, item) {
return item.id; // or item.id
}
所有函数的返回类型相同 item.id， 所以我的问题是，我需要多个 trackByFunction 或者只使用一个也可以。
2
推荐指数
推荐指数
1
解决办法
解决办法
428
查看次数
查看次数
指令模板值未更新
我正在建立一个像这样的指令(超时功能就像一个演示):
app.directive('timeRange', function () {
return {
restrict: 'A',
scope: {
sliderId: "@sliderId",
},
template: '<div id="{{sliderId}}"></div>'+
'<p>From: <span>{{fromVal}}</span>'+
'<span style="float:right;">{{toVal}}</span><span style="float:right;">To: </span>'+
'</p>',
link: function (scope, elem, attrs) {
scope.sliderId = 'NewId';
scope.fromVal = '06:00';
scope.toVal = '17:00';
setTimeout(function(){
scope.fromVal = 'Hello';
log("Changed");
}, 2000);
},
};
});
超时函数运行时,HTML不会更新,值保持不变06:00.如何在变量出现时更新模板？我是否需要以某种方式将其scope链接到我链接属性的部分？
1
推荐指数
推荐指数
1
解决办法
解决办法
3065
查看次数
查看次数
AngularJs自定义指令未被调用
我是AngularJs的新手.我试图调用自定义指令但它没有被调用.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="customDirective.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="MyController as ctrl">
<testingDirective></testingDirective>
{{ctrl.test}}
</div>
</div>
</body>
我的javascript文件看起来像:
var app=angular.module('app',[]);
app.controller('MyController',[function(){
var self=this;
self.test='no';
}]);
app.directive('testingDirective',function(){
return{
restrict:'AE',
replace:true,
template:'<h1>Hello World Test</h1>'
};
});1
推荐指数
推荐指数
2
解决办法
解决办法
149
查看次数
查看次数
输入填充动态时,AngularJS表单验证失败
我有以下表格:
如果我点击星号,输入将自动填充所点击的星号.(单击第3颗星,输入将填充数字'3',如下图所示)
明星的输入是ng-required="true".
<form name="completeSurveyForm" role="form" novalidate ng-submit="vm.save()">
<ul class="question-list">
<li data-ng-repeat="question in vm.survey.questions | orderBy:'conditionalOrderId' track by question.id ">
<small class="label label-primary pull-right">{{question.questionTypeName}}</small>
<h3>
<b>{{$index +1 }}.</b> {{question.questionBody}}
</h3>
<hr> <!-- Replace here with directives -->
<div data-ng-switch="question.questionType">
<numericrange question="question" data-ng-switch-when="NUMERIC_CHOICE" />
</div>
</li>
</ul>
<button type="submit" ng-disabled="completeSurveyForm.$invalid " class="btn btn-primary">
<span data-translate="fqApp.business.form.submit">Submit</span>
</button>
</form>
而numericrange指令如下所示:
<div class="row">
<div class="col-md-2" ng-if="!completed">
<div>
<span ng-mouseover="showHovered($event)" ng-mouseleave="clearStars($event)" ng-click="selectStar($event)"
data-ng-repeat="sym in range(startNonActive(question), question.maxValue, 1)" class="{{question.symbol}} starred-element" value="{{$index}}">
</span>
<input type="number" name="{{question.id}}" …html javascript angularjs angular-directive angular-validation
1
推荐指数
推荐指数
1
解决办法
解决办法
547
查看次数
查看次数
Angular 5属性指令将mat-ripple添加到host元素
如何将mat-ripple指令添加到我创建的自定义指令的host元素中？关键是要mat-ripple自动添加到我添加的任何元素my-custom-directive.
因此,如果我添加<button my-custom-directive>Button</button>到模板,它应该被渲染为,<button my-custom-directive mat-ripple mat-ripple-color="#000">Button</button> 而不必每次我使用时都输入所有这些my-custom-directive.作为一个例子,看看如何mat-raised-button工作.你只需添加该指令就mat-ripple可以了.我想用我自己的按钮复制它.
这不起作用.
HTML
<button my-custom-directive>Button</button>
指示
@Directive({
selector: ['appMyCustomDirective']
})
export class MyCustomDirective implements AfterViewInit {
constructor(
private renderer: Renderer,
private element: ElementRef
) { }
ngAfterViewInit() {
this.renderer.setElementAttribute(this.element.nativeElement, 'mat-ripple', '');
this.renderer.setElementAttribute(this.element.nativeElement, 'mat-ripple-color', '#000000');
}
}
我也试过注入MatRipple指令并调用MatRipple.launch(...)但是这会产生一个涟漪效应,它不会被限制在按钮内部,并且不会应用与mat-ripple通过模板直接添加到元素时相同的颜色.
1
推荐指数
推荐指数
1
解决办法
解决办法
4003
查看次数
查看次数
引用时未定义Angular 6属性指令
我试图更好地理解自定义指令，因此我正在遵循有关如何构建自定义属性指令的教程。但是，即使我确定我完全按照本教程进行操作，但是当我将指令设置为模板中的值时，它仍会返回为undefined。
这是使用的模板：
<div [appHighlight]='blue'>
TESTING TESTING TESTING
</div>
这是自定义指令的代码，该指令在鼠标悬停时使颜色变为绿色，而不是模板中指定的蓝色。
import { Directive, Input, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class ColorDirective {
@Input('appHighlight') hightlightColor: string;
element: ElementRef;
constructor(private el: ElementRef) {
}
@HostListener('mouseenter') onMouseEneter() {
console.log(this.hightlightColor); //coming back as undefined
this.hightlight(this.hightlightColor || 'green');
}
@HostListener('mouseleave') onmouseleave() {
this.hightlight(null);
}
private hightlight( color: string) {
this.el.nativeElement.style.color = color;
}
}
1
推荐指数
推荐指数
1
解决办法
解决办法
925
查看次数
查看次数
使用角度5中的指令激活省略号时如何激活工具提示？
我有一个带有“ dotdotdot” css类的以下模板，该模板在溢出时正确添加了省略号。
<div class="dotdotdot">{{data.trip.name}}</div>
我在这里要做的是实现一个指令，该指令仅在省略号被激活时才添加工具提示。
这是指令中的当前代码：
import { Directive, OnInit, ElementRef } from '@angular/core';
declare var $: any;
@Directive({
selector: '.dotdotdot'
})
export class DotdotdotDirective implements OnInit {
private el: HTMLElement;
constructor(elRef: ElementRef) {
this.el = elRef.nativeElement;
}
ngOnInit() {
if (this.isEllipsisActive(this.el)) {
// TODO add title attribute to the div with value from text
$(this.el).tooltip();
}
}
isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
}
上面的代码中有两个问题：
- isEllipsisActive无法正常工作，我需要识别椭圆的方法。
- 我需要知道如何从$（this.el）动态添加title或[title]属性。该值是来自div的文本。
谢谢！
1
推荐指数
推荐指数
2
解决办法
解决办法
1838
查看次数
查看次数
angular-如何获取没有exportAs的指令的引用
clrDate是不带exportAs语句的自定义第三方指令。
源代码
@Directive({
selector: '[clrDate]',
host: {
'[class.clr-input]': 'true',
},
providers: [DatepickerFocusService],
})
export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
@Input() placeholder: string;
@Output('clrDateChange') dateChange: EventEmitter<Date> = new EventEmitter<Date>(false);
@Input('clrDate')
...
}
我希望能够从我的控制器以及customDirective内部获得对它的引用。我怎样才能做到这一点？
<clr-date-container customDirective>
<label for="dateControl">Requirement Date</label>
<input id="dateControl" type="date" [placeholder]="'TT.MM.YYYY'" [(clrDate)]="item.requirementDate" (clrDateChange)="onChange($event)" [ngModel]="null" name="requirementDate"/>
<clr-control-error>{{ 'FORMS.VALIDATION.DATE_INVALID' | translate }}</clr-control-error>
</clr-date-container>
1
推荐指数
推荐指数
1
解决办法
解决办法
61
查看次数
查看次数