标签: angular-directive
自定义指令隐藏但代码仍然运行
我有一个自定义指令,有时使用ng-hide隐藏:
<my-custom-directive ng-show="vm.showBox"
value="vm.objects"
></my-custom-directive>
我的自定义指令代码的片段:
function myCustomDirective() {
var directive = {
controller: controller,
controllerAs: 'vm',
///...
scope: {
value: '='
}
};
return directive;
function controller($scope) {
var vm = this;
///...
$scope.value.dates = $scope.value.dates || [];
}
}
问题:即使不应该加载/显示指令(因为它vm.showBox是假的),自定义指令的控制器代码$scope.value也会运行,在这种情况下它会失败,因为没有传递(它在那里未定义).
如果指令被隐藏,为什么指令的控制器代码仍会运行？我想假设如果使用该指令,则给出有效参数而不必检查是否$scope.value已定义.
推荐指数
解决办法
查看次数
AngularJS ng-include不起作用
这是该main.html文件的来源
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var myApp = angular.module ('myApp',[]);
myApp.controller('myCtrl', function ($scope){
$scope.name = "Tim";
$scope.partialStuff = [ 'a', 'b', 'c' ];
alert(window.angular.version.full);//1.3.14 is displayed
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{name}}
<div ng-repeat="partialVar in partialStuff">
Hello: <div ng-include src="'part.html'"></div>
</div>
</div>
</body>
</html>
还有一个part.html 包含纯文本'part'- 只有几个符号.
这两个文件main.html和part.html位于同一文件夹中.
当我main.html在浏览器中打开时,我看不到三个重复的内容,part.html但是我看到三个Hello:.好像part.html没有加载.
为什么？
谢谢.
请将其放在body标签内以使其正常工作
<script type="text/ng-template" id="part.html">
part
</script>
html javascript angularjs angularjs-ng-repeat angular-directive
推荐指数
解决办法
查看次数
从其他模块访问指令
我有两个不同的模块，第一个包含控制器的第二个指令。
基本上，我希望directive在我的渲染view。但是，随着modules对directive和controller是不同的，它给错误。
如果我给的相同，module那么我希望为所有控制器提供服务的通用模块可以解决我的问题。
controller
angular.module('SlamModuleCtrl')
.controller('SlambookExt',['$scope','$route','SlambookCollection', function($scope,$route) {
console.log("slam controller")
}]);
Directive
angular.module('Genericmodule')
.directive('appVersion', ['version', function (version) {
return {
restrict: 'E',
template: '<h1>version1</h1>'
}
}])
View
<div ng-controller="SlambookExt">
<app-version>1</app-version>
</div>
dependency-injection angularjs angular-directive angular-controller
推荐指数
解决办法
查看次数
有条件地设置mdButton属性
根据要求，我要在按钮处于活动状态时将其设置为使用强调色突出显示。
就像是
<button md-button *ngFor="let item of items" [attr.color]="item.caption == activeItem ? 'accent' : ''">
或类似的东西
<button md-button *ngFor="let item of items" color="{{ item.activeColor }}"
我似乎可以在Angular 1中做到这一点，但在Angular 2中没有效果。
有人可以帮忙吗？
谢谢
推荐指数
解决办法
查看次数
在Angular 2材料中添加Sticky FAB
我想在我的角度2素材项目的屏幕底部(而不是页面)添加一个粘滞按钮.我尝试了一些调整,但目前当我向下滚动按钮时,它并没有停留在它应该是的位置.
在滚动之前它看起来像下面:
滚动后:
模板中元素的HTML:
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
CSS应用于元素除了任何默认值:
#fab{
position: fixed;
right: 30px;
bottom: 30px;
}
*{
margin: 0;
}
- 我怎样才能解决这个问题？
- 另外有任何内置的Angular材料可以做我想要的吗？
更新:
我的主要组件的模板:
<toolbar></toolbar>
<side-nav></side-nav>
Side Nav的模板:
<md-sidenav-container id="sidenav-container">
// contents
<router-outlet></router-outlet>
</md-sidenav-container>
和它的CSS:
#sidenav-container { // styling to make side nav of full height
position: fixed;
height: 90%;
min-height: 90%;
width: 100%;
min-width: 100%;
}
然后在路由器插座添加的组件内部将出现FAB元素.
Notes-list组件的模板(图像中显示的模板):
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
//rest of the content
推荐指数
解决办法
查看次数
如何访问 ion-input 指令包围的输入框的值
我是离子的新手。我正在使用 Ionic 框架 3。我的问题是我不知道如何访问 ion-input 指令包围的输入值。我想访问我创建的自定义指令的输入框的值。
ElementRef对获取输入框的值有帮助吗？我尝试过但失败了。请指导我访问自定义指令中输入框的值的正确方法。下面是我的代码...
我的自定义指令代码-电话号码
import { Directive, HostListener, ElementRef } from '@angular/core';
/**
* Generated class for the PhonenumberDirective directive.
*
* See https://angular.io/api/core/Directive for more info on Angular
* Directives.
*/
@Directive({
selector: '[phonenumber]' // Attribute selector
})
export class PhonenumberDirective {
constructor(private element: ElementRef) {
console.log('Hello PhonenumberDirective Directive');
}
@HostListener('keydown', ['$event']) onkeydown(event) {
let inputValue = this.element.nativeElement.textContent;
// Here inputValue is undefined I am getting :-(
}
}
HTML 代码
<ion-list inset> …mobile-application typescript angular-directive ionic3 angular
推荐指数
解决办法
查看次数
如何将 EventEmitter 与动态组件结合？
我正在尝试结合动态组件（在运行时创建）和 EventEmitter 概念来访问 Angular 8 中父组件中子组件的数据。
我的计划是创建一个功能，用户可以在其中动态添加元素（例如仪表板上的卡片）并删除它们。在这种情况下，创建的卡片有一个“删除”按钮。这个删除按钮应该将信息传播到父组件，子组件可以从包含动态创建的组件的数组中删除。
我在本教程中从 angular 文档中了解到，我需要创建一个指令。现在我有了断言（我认为），该指令位于父组件和子组件之间，我不知道如何正确发出事件以从提到的数组中删除子组件。
指令
@Directive({
selector: '[appCards]'
})
export class CardDirective {
constructor(public viewContainerRef: ViewContainerRef) {
}
@Output() directiveDelete = new EventEmitter<any>();
}
父组件
card-banner.component.ts
@Component({
selector: 'app-card-banner',
templateUrl: './card-banner.component.html',
styleUrls: ['./card-banner.component.scss']
})
export class CardBannerComponent implements OnInit, OnDestroy {
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
@Input() cards: CardItem[];
@ViewChild(CardDirective) appCards: CardDirective;
loadCards() {
const viewContainerRef = this.appCards.viewContainerRef;
viewContainerRef.clear();
for (const card of this.cards) {
const componentFactory =
this.componentFactoryResolver.resolveComponentFactory(card.component);
const componentRef = …推荐指数
解决办法
查看次数
angular: 表单控件的指令变换值
我想在用户输入名称控件时转换 slug 控件。我正在应用转换，例如将空格更改为连字符（-）等。
我为此创建了一个部分有效的指令。它确实转换了 slug 输入字段的值，但在输入名称时不会更改 slug 表单控件的值。
这是实时代码：https : //stackblitz.com/edit/angular-slug-transform
指示：
import { Directive, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: "[formControlName][appSlugTransform]"
})
export class SlugTransformDirective {
constructor(public ngControl: NgControl) {}
@HostListener("ngModelChange", ["$event"])
onModelChange(event) {
let newVal = this.transform(event);
this.ngControl.valueAccessor.writeValue(newVal);
}
transform(value) {
let text = value.toLowerCase();
if (text.charAt(0) == " ") {
text = text.trim();
}
if (text.charAt(text.length - 1) == "-") {
//text = (text.replace(/-/g, ""));
}
text = text.replace(/ +/g, …推荐指数
解决办法
查看次数
如何扩展 Angular 表单指令以具有全局自动完成=“关闭”
正如我们在 Angular 中<form>所知道的那样，是一个指令。我想知道是否有任何方法可以扩展该指令。
我需要这个，因为我想在我的视图中autocomplete="off"使用时总是附加属性<form>。或者也许有另一种更简单的方法来全局设置它？
html typescript angular-directive angular angular-reactive-forms
推荐指数
解决办法
查看次数
计时器 - Angular 8 的计时器
我正在尝试显示一个计时器，如下面的屏幕截图所示。不断计数以显示自该条目输入以来已有多长时间。
我找不到太多在 Angular 中执行此操作的选项。我在 Angular JS 中找到了这个解决方案。https://siddii.github.io/angular-timer/我需要这样的计时器。但我无法将其移植到 Angular 中，或者说我不能。因此尝试了其他可用的替代方案，发现这些仍然不起作用。
https://www.npmjs.com/package/ng2-simple-timer
https://www.npmjs.com/package/ngx-timer
我最接近的是这个 ngx-timer 的 Countup-timer。 https://www.npmjs.com/package/ngx-timer计时器工作正常，并且能够根据我的要求从给定日期开始。开始计时器（开始日期）。但它有一个尚未解决的已知问题，即它会将自身应用于计时器元素的最后一个已知索引，从而在整个计时器列表中只有一个计时器在运行。您可以在上面给出的屏幕截图中注意到这一点。
这是一个已知的错误。https://github.com/Y4SHVINE/ngx-timer-lib/issues
那么有人可以帮助我找到一个解决方案或对其中一个解决方案进行一些调整以使其发挥作用吗？
谢谢。
推荐指数
解决办法
查看次数
标签 统计
angular ×7
angularjs ×3
javascript ×3
typescript ×3
html ×2
angular8 ×1
css ×1
ionic3 ×1
timer ×1