标签: angular-directive
在角度分量中使用'require'
推荐指数
解决办法
查看次数
从Directive到Parent元素发出事件
我在HTML模板中有一个元素.我给它添加了一个指令:
<div myCustomDirective>HELLO</div>
我希望每当我将鼠标悬停在div文本里面时都div应该更改,但是需要从Directive (mouseover)事件中完成.
我不知道如何从a发出事件Directive并捕获父元素内部.
任何帮助表示赞赏.这是angular2项目.
推荐指数
解决办法
查看次数
语法错误:将变量传递给指令时,令牌':'是一个意外的令牌
我有一个调用的指令iframely,我在里面ng-repeat这样:
<iframely url="iterator.url"></iframely>
这只是将值视为字符串"iterator.url",而不是实际.url值.为了实验,我直接输入了一个URL:
<iframely url="https://soundcloud.com/braxe1/braxe-one-more-chance"></iframely>
这给了我Syntax Error: Token ':' is an unexpected token错误.我最接近将此值传递给指令的是:
<iframely url="'{{iterator.url}}'"></iframely> // note double and single quotes
这解析了URL参数iterator,但也将它与' '单引号一起作为字符串的一部分传递.
编辑:也尝试没有单引号.
<iframely url="{{iterator.url}}"></iframely>
得到了 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{iterator.url}}] starting at [{iterator.url}}]
这样做的正确方法是什么？
EDIT2:这是该指令的代码:
angular.module( 'iframely', [])
.directive( 'iframely', [ '$http', '$sce', function ( $http, $sce ) {
return {
replace: true, …推荐指数
解决办法
查看次数
指令在子模块中不起作用
我无法使指令在延迟加载的模块中工作.我已经阅读了文档,我只是将指令添加到主模块的声明数组中.该指令在该模块中按预期工作,但它在延迟加载的模块中不起作用.它甚至可以防止因模板错误而打开延迟加载的模块:
Can't bind to 'myHighlight' since it isn't a known property of 'p'
这是我的Plunker.
点击"转到孩子"后查看控制台中的错误
推荐指数
解决办法
查看次数
如何将ngFocus/ngBlur委托给指令的模板<input>元素？
我正在尝试创建一个自定义组件(指令),它由一个<input>框和一个[-]和[+]按钮组成.目前,以下示例仅实现输入框.
所以,我说我的指令有以下HTML:
<my-input ng-blur="onBlur($event)" ng-focus="onFocus($event)"></my-input>
出于测试目的,我使用以下代码:
app.run(function ($rootScope) {
$rootScope.onBlur = function ($event) {
console.log('onBlur', $event);
};
$rootScope.onFocus = function ($event) {
console.log('onFocus', $event);
};
});
现在我想创建我的自定义<my-input>指令,它<input>在模板上有一个框,我需要ng-blur和ng-focus设置<my-input>为响应输入框上的模糊/焦点事件.
我有以下解决方案几乎工作:http://codepen.io/anon/pen/KpELmj
1)我有一种感觉,这可以用更好的方式实现,我似乎无法做到这一点.思考？
2) $event似乎是undefined,我无法理解为什么.思考？
推荐指数
解决办法
查看次数
Angular Directives:scope vs bindToController
从Angular v1.4开始,可以这样做:
scope: {},
bindToController: {
name: "="
}
而不是旧的做法:
scope: {
name: "="
},
bindToController: true
除了更直观,它们之间有什么区别吗？
推荐指数
解决办法
查看次数
来自组件的Angular 4调用指令方法
我正在尝试构建一个结构指令,它将通过使用其选择器(静态)或通过调用其公共方法(动态)来调用父DOM结构.
在html模板中使用指令选择器可以正常工作而不会出现任何问题.
我试图弄清楚我们是否在模板中使用它并通过调用指令方法实现相同.
我-directive.ts
@Directive({ selector: '[sampleDirective]' })
export class SampleDirective {
...
constructor(..) {
this.customDirective();
}
}
customDirective() {
console.log('Inside customDirective()');
}
我-component.ts
import { SampleDirective } from './my.directive';
...
@Component({
selector: 'my-component',
template: `<button (click)="click()"> Click Me </button>`
})
constructor() { }
..
click() {
// call directive method here
}
我需要这个,因为我正在创建一个通用的解决方案,在运行时借助指令更改组件的DOM结构.
**如果有任何拼写错误,请忽略.抱歉,我无法在此处粘贴完整代码
推荐指数
解决办法
查看次数
角度计时器指令不适用于离子框架
我在使用离子框架实现angular timer指令时遇到了问题. http://siddii.github.io/angular-timer/
当我使用bower或google cdn实现代码时,我没有任何问题.
<!DOCTYPE html>
<html>
<head>
<title>Plain Javascript Timer Example</title>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
function startTimer() {
document.getElementsByTagName('timer')[0].start();
}
function stopTimer() {
document.getElementsByTagName('timer')[0].stop();
}
</script>
</head>
<body>
<div>
<h2>Plain JavaScript - Timer Example</h2>
<h3><timer ng-app="timer"/></h3>
<button onclick="startTimer()">Start Timer</button>
<button onclick="stopTimer()">Stop Timer</button>
</div>
<br/>
</body>
</html>
但是,当我使用离子束 http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js时, 我无法让计时器工作.并且似乎没有在控制台中出现任何错误.
这是一个已知的问题？
什么会阻止它工作？
是否有人们可以推荐的备用计时器？这个对我来说似乎最好？
javascript timer angularjs ionic-framework angular-directive
推荐指数
解决办法
查看次数
Angular`<router-outlet>`显示两次模板
我使用angular4并尝试创建路由器链接.路由器链接有效但两次显示模板.
下面是我在组件中的代码:
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
template: `
<h1>Contacts App</h1>
<ul>
<li><a [routerLink]="['/facebook/top']">Contact List</a></li>
</ul>
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor(
private route: ActivatedRoute,
private router: Router,
){ }
gotoDetail(): void {
this.router.navigate(['facebook/top']);
}
}
我的路线:
const routes: Routes = [
{ path: '', component: AppComponent },
{ path: 'facebook/top', component: CommentComponent },
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class …推荐指数
解决办法
查看次数
是否可以在不读取DOM的情况下以Angular读取元素的文本内容？
我需要能够使用代码翻译的字符串在我的角度应用程序,但对国际化工具还没有完成这一任务,我实现了一个稍微哈克版本,它利用的角度现有的国际化能力,以逐步淘汰的意图我原生Angular的解决方案,因为它的i18n功能可以满足我的需求(应该是5.x版本,手指交叉).
基本上,我有一个TranslationDirective从DOM读取文本,并在文本更改时发出事件:
@Directive({
selector: '[myAppTranslation]'
})
export class TranslationDirective implements AfterViewChecked, OnChanges {
/**
* dependencies takes an array of the values needed to calculate the output translation
* we use this for change detection, to minimize the DOM interaction to only when it is necessary
*/
@Input() dependencies: any[];
isDirty = true;
@Input() messageKey: string;
message: string;
@Output() messageUpdated = new EventEmitter<TranslationEvent>();
constructor(public el: ElementRef) {}
/**
* sets the translated message and triggers the …推荐指数
解决办法
查看次数