angular.module('mod1', [])
.directive('myDir', ($timeout) => {
return {
///....
}
});
angular.module('myApp', ['mod1'])
<html ng-app="myApp">
<body>
<my-dir valu='blablabla' />
</body>
</html>
那为什么这不起作用呢？并说未知提供者:$compileProvider,
但如果我将指令移入myApp模块就可以了
我在使用离子框架实现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
.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.layoutDTO = LayoutDTO;
self.layoutPreviewDTO = LayoutPreviewDTO;
var test = $scope;
if(self.isPreview)
self.layoutModel = new self.layoutPreviewDTO(self.pageConfiguration);
else
self.layoutModel = new self.layoutDTO(self.pageConfiguration);
}
<div>
<layout page-layout="ctrl.layoutTemplateUrl" page-configuration="ctrl.pageConfiguration" is-preview="false"></layout>
</div>
在角度1.5.3版本中,这按预期工作,我的控制器中的变量带有值.现在,自从我升级到1.6.x后,self.pageConfiguration现在未定义.
除角度版本外,没有任何改变.
如何处理传递给控制器中指令的值？
angularjs angular-directive angular-controller angularjs-1.6
我需要能够使用代码翻译的字符串在我的角度应用程序,但对国际化工具还没有完成这一任务,我实现了一个稍微哈克版本,它利用的角度现有的国际化能力,以逐步淘汰的意图我原生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 …我最近将AngularJS应用程序转换为使用Browserify,同时,我从Mimosa切换到Gulp作为我的构建系统.
在处理了许多其他小问题之后,我遇到了一些问题:
使用ng-switch和ng-switch-when时,我的index.html中出现以下错误:
Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
ng-include对我不起作用(没有错误消息,没有包含任何内容,也没有发出网络请求).
我的一个自定义属性中的代码从未被调用过,即使它显然是我原始index.html文件中HTML标记的一部分.
我花了很多时间尝试各种各样的事情,看看问题可能是什么,但最终跟踪它,如下面的答案所述.
假设我有以下代码
<div ng-app="app" ng-controller="controller">
<div ng-repeat="instance in instances>
<customDirective ng-model="instance"></customDirective>
</div>
</div>
我的自定义指令有一个独立的范围,定义如下:
app.directive('customDirective', function($log) {
return {
restrict: 'E',
templateUrl: './template.htm',
scope: {_instance:"=ngModel"},
link: function($scope) {
....
}
});
在这个指令中,我必须选择删除它.我的问题是如何与父作用域中的数组实例进行通信并告诉它销毁此对象并实际上从我的DOM中删除已删除的实例？
希望有道理.
我们最近更新了我们的应用程序以使用最新的角度版本,从版本到1.3.0到1.5.0之前.显然我们现在碰到1.3.0中引入的突破性变化:
https://github.com/angular/angular.js/issues/9218
我们有一个自定义指令,使我们能够使用pikaday日期选择器:
module.directive('pikaday', function () {
return {
require: 'ngModel',
link: function preLink(scope, element, attrs, controller) {
var $element = $(element),
momentFormat = 'DD/MM/YYYY',
year = new Date().getFullYear();
// init datepicker
var picker = new Pikaday(
{
field: document.getElementById(attrs.id),
firstDay: 1,
format: momentFormat,
minDate: new Date((year - 1) + '-01-01'),
maxDate: new Date((year + 1) + '-12-31'),
yearRange: [year - 1, year + 1],
onSelect: function (date) {
controller.$setViewValue(date);
},
defaultDate: scope.$eval(attrs.ngModel), // require: 'ngModel'
setDefaultDate: true
});
// …我正在尝试使用NgStyle带有对象变量的指令,如下所示:
@Component({
template: `
<div [ngStyle]="object">
some test text
</div>`
})
export class example {
private object: string = "{background-color: 'white'}";
}
我也试图与object = "background-color: 'red'"和[ngStyle]="{object}",但似乎这是行不通的.我收到消息错误:
错误:未捕获(在承诺中):由以下原因引起的错误:找不到支持对象'{color:'white'}'(...)consoleError @ VM1051 zone.js@0.6.21？main = browser:346_loop_1 @ VM1051 zone. js@0.6.21?main = browser:371drainMicroTaskQueue @ VM1051 zone.js@0.6.21?main = browser:375ZoneTask.invoke @ VM1051 zone.js@0.6.21？main = browser:297
我究竟做错了什么？
我有一个角度4的组件,被称为三次.在模板元数据中,我有一个带有指令的div,带有一些这样的绑定.
@import {gServ} from '../gServ.service';
@Component: ({
selector: 'sr-comp',
template: `<div gDirective [cOptions]="dataChart">`
})
export class SGComponent implements OnInit {
@Input('report') public report: IReportInstance;
cOptions:any;
constructor(private gServ: gServ) {
}
ngOnInit(){
this.cOptions = {};
this.cOptions = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt);
//this.report.opt is binded to a component when is instantiated.
//this.gServ.objectMerge is a function that merge the two objects
}
}
this.cOptions改变了组件的每个实例,然后在指令中我有这个:
import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
@Directive({
selector: '[gDirective]'
})
export class SGDirective implements OnInit {
public …我试图在角度文档中显示一个类似(不完全)的动态组件.
我有一个带有viewContainerRef的动态指令
@Directive({
selector: '[dynamicComponent]'
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
摘自组件代码
@ViewChild(DynamicComponentDirective) adHost: DynamicComponentDirective;
..
ngAfterViewInit() {
let componentFactory = null;
console.log(component);
componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
// this.adHost.viewContainerRef.clear();
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.createComponent(componentFactory);
}
最后<ng-template dynamicComponent></ng-template>在模板中添加