标签: angular2-directives

我坚持如何ngModel使用指令访问和更改输入值.问题的结果是,当我选择所需的地址时,模型的地址值不会更新...它只是设置为我实际键入输入的内容,而不是输入的最终值.

我键入'830':

我选择'8300 Fauntleroy Way Southwest,Seattle,WA,United States':

结果价值:

{
  address: '830'
}

期望值:

{
  address: '8300 Fauntleroy Way Southwest, Seattle, WA, United States'
}

在AngularJS中,我可以这样做:

(function() {
  'use strict';

  angular
  .module('casemanagerApp')
  .directive('googleplace', googleplace);

  function googleplace() {

    var directive = {
      require: 'ngModel',
      link: link
    };

    return directive;

    function link(scope, element, attrs, model) {
      var options = {
        types: [],
        componentRestrictions: {}
      };
      scope.gPlace = new google.maps.places.Autocomplete(element[0], options); // jshint ignore:line

      google.maps.event.addListener(scope.gPlace, 'place_changed', function() { // jshint ignore:line
        scope.$apply(function() …

是否可以限制哪个组件可以具有自定义指令？

例如：

@Directive({ 
    selector: '[myHighlight]', 
    host: "my-component" //!!!!!!!!!
})
export class HighlightDirective {
    constructor(el: ElementRef) {  //el is my-component - can not be nothing else !!!!
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

@Component({selector: "my-component"})...

用例：
我想为特定的第三方组件编写指令。我将使用该第三方组件属性，因此在另一个组件上的指令没有任何意义并且会引发错误。

这意味着myHighlightondiv将被忽略。

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

*myCustomDirective="loading$ | async as result" 

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

我正在使用Angular2和Semantic UI作为css库.我有这段代码:

<div class="ui three stakable cards">
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
</div>

卡片很好地呈现在它们之间的空间.像这样:请参阅链接中的卡片部分

因为卡片代表某种视图我想到用它制作一个组件,所以现在代码是:

<div class="ui three stakable cards">
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
</div>

但现在风格破碎了,它们之间再也没有空间了.

有没有什么好办法解决这个问题？

我想做的第一件事是:

my-card-component OLD template:
<a class="ui card">
    [some junk]
</a>

           |||
           VVV

my-card-component NEW template:
[some junk]

and instantiating like:
<my-card-component class="ui card"></my-card-component>
or like:
<a href="?" my-card-component></a>

但这并不令人满意,因为我希望能够传入一个对象并且组件会自动设置[href]=obj.link.

在AngularJS 1.0中,有一个replace: true属性可以满足我的需求,在Angular2中有类似的东西吗？

这个问题不是询问如何访问像i,first,last这样的循环变量,而是如何检索和设置变量作为TEMPLATE VARIABLES.

这不行......

<div #lastElement="arr[arr.length-1]"></div>

所以我实际上需要在组件中创建一个局部变量然后直接绑定它？

我觉得很多东西我可以用过去的ng-*指令来完成所有这些都需要在组件中进行硬编码...有点降级tbh

我在angular2的udemy课程中学习angular2,老师写了一个突出显示html元素的指令.

我试图做休闲,但对我来说_renderer.setElementStyle抛出异常.

EXCEPTION:TypeError:无法在[null]中设置undefined的属性'background-color'

指令:

import {Directive, ElementRef, Renderer, OnInit} from 'angular2/core';

@Directive({
    selector: '[highlight-directive]'
})

export class HighlightDirective implements OnInit{
    private _defaultColor= 'green';

    constructor(private _elmRef: ElementRef, private _renderer: Renderer) {}

    ngOnInit(): any {
        this._renderer.setElementStyle(this._elmRef, "background-color", this._defaultColor);
        //this._elmRef.nativeElement.style.backgroundColor = this._defaultColor; //this way works fine.
    }
}

我使用该指令的模板:

template: `
    <div highlight-directive>
        Highlight me
    </div>
    <br>
    <div highlight-directive>
        2 Highlight me 2
    </div>
`,

教师工作区:

任何人都能找到我做错的事吗？

谢谢.

有没有人让Mathjax与Angular2合作？

Plunkr示例创建: - http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview

从一些Angular1示例中我看到它看起来像需要一个指令来调用MathJax.Hub.Queue,但我怀疑我需要花费很长时间来使Angular 2语法正确,所以我想知道是否有人已经完成了它？

例如,以下是Angular 1示例. https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

mathjax语法在这里: - https://docs.mathjax.org/en/v1.1-latest/typeset.html

尝试在Angular2中做类似的事情.

更新 - 感谢Thierry,以下工作.

零件:-

import {Component, OnInit} from 'angular2/core';
import {MathJaxDirective} from './mathjax.directive';

@Component({
  selector: 'hello-mathjax',
  templateUrl: 'app/hello_mathjax.html',
  directives: [MathJaxDirective]
})
export class HelloMathjax {
  fractionString: string = 'Inside Angular one half = $\\frac 12$';
  index: number = 3;

    ngOnInit() {
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathJax"]);
    }

    update () {
      this.fractionString = 'Inside Angular one third = $\\frac 1'+this.index+'$';
      this.index++;
    }

}

指示:-

import {Directive, ElementRef, Input} from 'angular2/core';
@Directive({
    selector: …

我正在寻找许多论坛和问题,但似乎没有人问如何双击ou双击Angular/ionic 2？

在离子v1中可以使用on-double-tap(参见http://ionicframework.com/docs/api/directive/onDoubleTap/)

有没有人可能有一个提示或任何代码来捕捉离子2 /角度2上的双击事件？

也许通过HammerJS？

非常感谢你 !路易斯:)

我有一个名为EasyBoxComponent的组件,以及一个带有此viewchild的指令

@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;

this.myComponent总是未定义的

我认为这是正确的语法..

我的HTML是

<my-easybox></my-easybox>
<p myEasyBox data-href="URL">My Directive</p>

import { Directive, AfterViewInit, HostListener, ContentChild } from '@angular/core';
import { EasyBoxComponent } from '../_components/easybox.component';

@Directive({
    selector: '[myEasyBox]'
})
export class EasyBoxDirective implements AfterViewInit {

    @ContentChild(EasyBoxComponent) myComponent: EasyBoxComponent;
    @ContentChild(EasyBoxComponent) allMyCustomDirectives;

    constructor() {
    }

    ngAfterViewInit() {
        console.log('ViewChild');
        console.log(this.myComponent);
    }

    @HostListener('click', ['$event'])
    onClick(e) {
        console.log(e);
        console.log(e.altKey);
        console.log(this.myComponent);
        console.log(this.allMyCustomDirectives);
    }

}

我正在使用第三方库将小部件渲染到屏幕上(Okta的SignInWidget).窗口小部件的呈现方式如下:

this.oktaSignInWidget.renderEl(
    { el: '#widget-container' },
    () => {},
    err => {
      console.error(err);
    }
  );

我最初的想法是把它放到一个指令中,但即使有指令你也应该让Renderer2进行渲染.这里有最好的做法吗？