标签: angular-directive

我们需要创建一个drag and drop指令。usingdrag and drop events不适用于 SVG 元素，因此，我们需要使用标准mousedown,mousemove和mouseup事件。我在 JavaScript 中看到了一些示例，但不知何故我无法将其与 Angular 一起使用。

mousemove只要未选择可拖动元素即可工作。

如何选择元素并用 拖动它HostListener mousemove？

我创建了一个StackBlitz，以便您可以看到我所做的事情。如果我拖动元素并打开控制台，您将看到该mousemove事件不会被触发。

我缺少什么？

我正在使用 Angular 5 并尝试创建某种动态组件。

我有一个简单的指令MyColumnDef（使用选择器[myColumnDef]）。没有什么特别的。我将它用于：

父组件.html：

<div>
  <my-table>
    <ng-template myColumnDef>
      Lorem ipsum.
    </ng-template>
  </my-table>
</div>

my-table.component.html：

<div>
  Something:
  <ng-container *ngTemplateOutlet="temp"></ng-container>
</div>

在my-table.component.ts中：

 @ContentChild(MyColumnDef, {read: TemplateRef}) temp;

这应该显示'Lorem ipsum.'文本，但什么也没有，实际上是temp（undefined根据），我不知道为什么。我错过了什么吗？console.logngAfterViewInit

我编写了一个名为的组件my-component，并在里面添加了一些组件ng-template，并为每个组件命名，#如下所示：

<my-component>
    <ng-template #one>
        1st format
    </ng-template>
    <ng-template  #two>
        2nd template
    </ng-template>
    <ng-template  #three>
        3rd template
    </ng-template>
</my-component>

在 的声明中MyComponent，我曾经@ContentChildren(TemplateRef)访问过这三个模板。

现在我需要以某种方式在内部访问这些模板的名称（one、、），但我不知道如何。这是代码：示例代码twothreeMyComponent

我正在使用 Angular Material 创建在输入字段中输入的芯片。因此，文档示例中给出的当前默认行为是在输入框中显示筹码。我不想在我的输入字段中显示这些芯片，我想做的是当用户输入任何内容时，应该在输入字段下创建芯片（而不是在输入字段内）。您可以通过任何示例链接帮助我。

我正在尝试实现一个输入字段，其中只允许数字键。为此，我已成功在表单中实现了仅数字验证。

但这里的要求是，除了数字键之外，其他键都不能工作。为此，我已经绑定了实现 @HostListener

在这种情况下，当我们单击字母键时，它不会显示在输入字段中，但会分配该字母的值。

请检查代码：HostListener代码：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumberDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if ( initalValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }

}

HTML：

Type anything other than numbers, the change is fired even if the textfield content does not change :
<br/>
<input type="text" [(ngModel)]="value" (ngModelChange)="onChange($event)" numbersOnly/> …

请帮帮我，我该怎么办？

我想将指令应用于 div，它将根据其值显示或隐藏内容，例如： *ifViewportSize="\'mobile\'"

<div *ifViewportSize="\'large\'">PC</div>\n<div *ifViewportSize="\'small\'">Mobile</div>

\n

指令：（console.log 中的结果）https://stackblitz.com/edit/angular-ivy-wdl8ee

@Directive({\n  selector: \'[ifViewportSize]\'\n})\nexport class IfViewportSizeDirective {\n\nsize: string;\n\n  config = {\n    large: 992,\n    medium: 768,\n    small: 576\n  };\n\n  constructor(\n    private elemRef: ElementRef,\n    private vcRef: ViewContainerRef,\n    private templRef: TemplateRef<any>) {\n\n    window.onresize = (event) => {\n      this.showElem();\n    };\n  }\n\n  @Input() set ifViewportSize(size: string) {\n    this.size = size;\n  }\n\n  ngOnInit() {\n    this.showElem();\n  }\n\n  showElem() {\n    console.log(\'size: \',this.size);\n\n    if (this.config[this.size] < window.innerWidth) {\n      this.vcRef.clear();\n      this.vcRef.createEmbeddedView(this.templRef);\n    }\n …

我正在装饰这样的表格:

angular.module('Validation').directive('form', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      var inputs = element[0].querySelectorAll('[name]');

      element.on('submit', function() {
        for (var i = 0; i < inputs.length; i++) {
          angular.element(inputs[i]).triggerHandler('blur');
        }
      });
    }
  };
});

现在,我正在尝试测试这个指令:

describe('Directive: form', function() {
  beforeEach(module('Validation'));

  var $rootScope, $compile, scope, form, input, textarea;

  function compileElement(elementHtml) {
    scope = $rootScope.$new();
    form = angular.element(elementHtml);
    input = form.find('input');
    textarea = form.find('textarea');
    $compile(form)(scope);
    scope.$digest();
  }

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $rootScope = _$rootScope_;
    $compile = _$compile_;

    compileElement('<form><input type="text" name="email"><textarea name="message"></textarea></form>');
  })); …

当我想要一个显示事物列表的指令时,我一直在突然对准角度,但我希望它足够通用以处理多个类型/形状的对象.举个简单的例子,我可以说

<select ng-options="person.id by person in people" ng-model="selectPerson">
  <option>
     {{person.name}}
  </option>
</select>

(请记住,这是一个简单的例子,这个简单的东西可能不会从指令中受益)

现在我想把它变成一个名为cool-select的通用指令我可能会尝试在我的js中做这样的事情

//directive coolselect.directive.js
angular.module('mycoolmodule',[]).directive('coolSelect',function(){
    return {
       restrict:'E',
       templateUrl:'js/coolselectdirective/_coolselect.html',//html from example above
       scope:{
             items:'=',
             displayProperty:'@',
             idProperty:'@',
             selectedItem:'='
       },
       link:function(scope,element){
        //do cool stuff in here
       }
   }
});

但接下来我就开始在嘴里呕吐了一下

//html template _coolselect.html
<select ng-model="selectedItem" ng-options="item[scope.idProperty] by item in items">
  <option>      
     {{item[scope.displayProperty]}}
   </option>
</select>

说实话,我甚至不确定这是否有效.我已经看到了ui-select通过使用外部范围所做的事情.也许这是要走的路？ https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892

但后来我觉得我需要喜欢转换,就像ui-select那样.是不是有更简单的方法？我是否试图对泛型指令？这不是其他人遇到的问题吗？

编辑:最后它看起来像这样理想.

<cool-select repeat="person.id by person in people" display-property="name"></cool-select>

我正在尝试使用require和共享父控制器来连接两个指令.

我在其他项目中已经完成了这么多次,但对于我的生活,我无法让这个工作......

指令控制器this返回undefined,这反过来使得很难将方法传递给子指令...

这是我的父指令的代码:

app.directive('defaultHeader', () => {

    let defaultHeaderCtrl = ($scope, $element) => {

        let containEl,
            elHeight = 500;

        console.log(this) // returns 'undefined'

        function resizeElement(el, height) {
            el[0].style.height = `${height}px`
        }

        if (_.isUndefined($scope.coverImgUrl)) {
            resizeElement($element, elHeight);
        } else {

        }
    };

    return {
        restrict: 'A',
        scope: {
            coverImgUrl: '='
        },
        controller: defaultHeaderCtrl
    };
});

这个小提琴表明指令控制器this应该返回构造函数.

如果有人有兴趣,这里有一些背景:

• ui router template是一个指令元素 <div default-header data="data"></div>
• ui路由器解析数据,然后通过控制器传递给指令

谢谢您的帮助

根据AngularJS开发人员指南 - 指令"隔离指令的范围",范围绑定可以在3种类型中完成

=,@和&

和

根据本页的"指令定义对象"部分,范围绑定可以在4种类型中完成

=,@,&和<

即使在大多数在线文章中,也只提供了3种类型的范围绑定.

哪个是对的？