标签: angular-directive

我最近将AngularJS应用程序转换为使用Browserify,同时,我从Mimosa切换到Gulp作为我的构建系统.

在处理了许多其他小问题之后,我遇到了一些问题:

1. 使用ng-switch和ng-switch-when时,我的index.html中出现以下错误:

   Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

2. ng-include对我不起作用(没有错误消息,没有包含任何内容,也没有发出网络请求).

3. 我的一个自定义属性中的代码从未被调用过,即使它显然是我原始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中删除已删除的实例？

希望有道理.

我正在创建一个自定义* ngIf指令，以在加载时用占位符替换内容。我可以根据需要进行所有工作并在* ngIf指令之后对其进行建模（https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts）唯一不起作用的是as语法，但看不到任何引用或从何处开始。

*myCustomDirective="loading$ | async as result" 

上面的方法不起作用，当loading $ observable发出数据时，结果是不确定的。显示占位符，但是按预期将其替换为内容。（尽管由于不确定的结果，内容还是有错误）

我按照一些教程来制作角度指令.在隔离范围中,一些教程定义范围如下:

scope: {
  model: '=?',
  data:  '@?' 
}

和一些教程定义范围没有问号,如:

scope: {
  model: '=',
  data:  '@'
}

任何人都可以通过恰当的例子向我解释这些的区别或目的.谢谢.

我使用过这里的一种风格:http://tympanus.net/Development/TextInputEffects/index.html

要创建输入指令,请参阅plunker:https://plnkr.co/edit/wELJGgUUoiykcp402u1G ？ p = preview

这适用于标准输入字段,但是,我正在努力工作wirth Twitter typeahead:https://github.com/twitter/typeahead.js/

问题 - 如何将我的浮动输入标签与typeahead一起使用？

app.directive('floatInput', function($compile) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      elemTitle: '=elemTitle',
      elemtId: '=elemeId'
    },
    templateUrl: 'input-template.html',
    link: function(scope, elem, attrs) {
      var ngModelName = elem.attr('input-model');
      var inputElem = angular.element(elem[0].querySelector('input'));
      inputElem.attr('ng-model', ngModelName);

      $compile(inputElem)(scope);
      $compile(inputElem)(scope.$parent);

      var inputLabel = angular.element(elem[0].querySelector('label span'));
      inputLabel.attr('ng-class', '{\'annimate-input\' : '+ngModelName+'.length > 0}');
      $compile(inputLabel)(scope);
    },
    controller: function($scope) {
      $scope.title = $scope.elemTitle;
      $scope.inputId = $scope.elemId
    } …

我有这个

https://angular-dynamic-component-append.stackblitz.io/

我设法动态附加了一个元素，但它没有被编译。我看到很多教程像这样

但这并不是我真正需要的。他们经常使用标签符号来识别容器。

我需要将一个组件附加到任何可能包含我的自定义指令的元素。

我还需要使用指令的绑定值来控制附加元素上的 [hidden] 属性。

目标

1. 覆盖现有组件的行为：
   • 添加属性以显示/隐藏
   • 添加一个类来自定义外观
2. 减少html编码
   • 无需编写整个组件 <my-comp></mycomp>
   • 不需要知道班级
   • 更改类名时的自动行为
     3. 更改应用指令的元素
   • 最终目标是向 contaner 元素添加一个类

预期来源

<div [myDirective]="myBoolean">
    <p>some content</p>
</div>

预计编译

<div [myDirective]="myBoolean" class="myDirectiveClass1">
    <p>some content</p>
     <someComponent [hidden]="myBoolean" class="myDirectiveClass2"></someComponent>
</div>

有没有办法实现这一目标？

先感谢您

我有一个组件click.

<my-box (click)="openModal()"></my-box>

当我单击此元素时,openModal函数将运行.而且我想给出1000ms的节流时间以防止打开多个模态.

我的第一种方法是使用Subject(来自rxJs)

//html
<my-box (click)="someSubject$.next()"></my-box>
//ts
public someSubject$:Subject<any> = new Subject();
...etc subscribe

但我觉得它有点冗长.

Next Approach正在使用a directive.我修改了一些我通过谷歌搜索找到的代码.

//ts
import {Directive, HostListener} from '@angular/core';

@Directive({
    selector: '[noDoubleClick]'
})
export class PreventDoubleClickDirective {

    constructor() {
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        event.stopPropagation();    // not working as I expected.
        event.preventDefault();     // not working as I expected.

        event.srcElement.setAttribute('disabled', true);    // it won't be working unless the element is input.
        event.srcElement.setAttribute('style', 'pointer-events: none;');   // test if …

我有一个物质输入控件,我在用户输入时限制了特殊字符,但是在任何编辑器中键入一些单词并复制并粘贴具有特殊字符的单词时,这是不起作用的.

我已经编写了指令来防止特殊字符,但可以在复制粘贴中提供更好的解决方案限制.

app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput specialIsAlphaNumeric placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

指示:

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

    regexStr = '^[a-zA-Z0-9_]*$';
    @Input() isAlphaNumeric: boolean;

    @HostListener('keypress', ['$event']) onKeyPress(event) {
        return new RegExp(this.regexStr).test(event.key);
    }

}

演示见这里:

https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app%2Finput-overview-e[stackblit

重现步骤:

输入不允许的特殊字符:工作正常.而复制粘贴机智允许特殊字符

我昨天才开始使用带有角度的 cypress.io，正如文档所说，我正在使用属性 data-cy 专门针对元素

<div data-cy="myelement">Hello</div>

cy.get("[data-cy=myelement]")

问题是如果我想动态绑定它，angular 无法识别 data-cy 属性

<div *ngIf="user$ | async as user" [data-cy]="user.name">Online</div> 

我是否必须创建一个个人指令来动态添加该属性？或者有更好的方法吗？

我想用指令设置 HTML 元素的内容。

export class AdvertisementDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.background = 'yellow';
    el.nativeElement.content = '<p>Hello World<p>';
  }

}

但它不起作用，也没有给出任何错误。

这样做背后的想法是在指令中包含 Ad 代码，并在我使用指令属性的任何地方设置它。广告代码包含JavaScriptHTML 代码。