标签: angular-directive

我花了很多时间阅读AngularJS文档和几个教程,我对文档的无法接近感到非常惊讶.

我有一个简单的,可回答的问题,对于想要获取AngularJS的其他人也可能有用:

什么是AngularJS指令？

在某处应该有一个简单,精确的指令定义,但AngularJS网站提供了这些令人惊讶的无用定义:

在主页上:

指令是AngularJS中独特而强大的功能.指令允许您创建特定于您的应用程序的新HTML语法.

在开发人员文档中:

指令是教授HTML新技巧的一种方式.在DOM编译期间,指令与HTML匹配并执行.这允许指令注册行为或转换DOM.

并且有一系列关于指令的讨论,具有讽刺意味的是,似乎假设观众已经了解它们是什么.

任何人都可以提供一个明确的参考,准确定义指令的解释:

1. 它是什么(以jQuery的清晰定义为例)
2. 它打算解决哪些实际问题和情况
3. 它体现了什么样的设计模式,或者它如何适应AngularJS 声称的MVC/MVW任务.

我想为已经部署在Angular 2中的一些组件创建扩展,而不必几乎完全重写它们,因为基本组件可能会发生更改,并希望这些更改也反映在其派生组件中.

我创建了这个简单的例子,试图更好地解释我的问题:

使用以下基本组件app/base-panel.component.ts:

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'base-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class BasePanelComponent { 

  @Input() content: string;

  color: string = "red";

  onClick(event){
    console.log("Click color: " + this.color);
  }
}

您是否只想更改另一个衍生组件,例如,在示例颜色的情况下,基本组件行为app/my-panel.component.ts:

import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'

@Component({
    selector: 'my-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class MyPanelComponent extends BasePanelComponent{

  constructor() { …

我正在使用angular2进行开发,并想知道ng-disabled在angular2中是否有任何替代方案.

对于前者 下面的代码是angularJS:

<button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

只是想知道如何实现此功能？任何输入？

我正在使用如下模板:

<ul [ngClass]="{dispN: !shwFilter,'list-group':true,'autoS':true,'dispB':shwFilter,'myshddw':true}" style=";display: none">
  <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    <div *ngIf="valm1 && valm1.type=='1'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='2'" (click)="modlTxt=valm1;notREadVu(j)" data-toggle="modal" data-target="#myModal">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='3'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
  </li>
  <li [ngClass]="{bgDFF: !colps[j],'list-group-item':true,'lgOt':true}" (click)="logout()">
    <span class="title">Log Out <i class="fa fa-sign-out"></i></span>
  </li>
</ul>

所以它给出了以下错误:

EXCEPTION: Template parse …

我一直在阅读这篇关于.component()Angular 1.5中新助手的最新文章,该文章应该可以帮助每个人最终迁移到Angular 2.一切看起来都很简单,但我找不到任何有关组件内DOM操作的信息.

template虽然有一个属性,它可以是一个函数,接受$element和$attrs参数.我还不清楚这是否是link功能的替代品.它似乎并非如此.

我有一个构建表单的指令:

app.directive('config', function() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    template: '<form name="configForm">' +
      '<input type="number" max="10" ng-model="config.item" name="configItem"/>' +
      '<div class="form-error" ng-show="configForm.$error.max">Error</div>' + 
      '</form>',
    controller: 'ConfigDirectiveController',
  };
});

我想要做的是通过单元测试验证错误消息将在给定输入时显示.使用角度1.2我可以修改$ scope.config.item并更新视图值并显示错误.

尽管我已经知道,使用angular 1.3,如果模型未通过验证,则视图值不会更新...所以我需要修改视图值以确保显示错误消息.

如何访问"configItem"输入以便我可以设置视图值以确保显示错误消息？

编辑显示单元测试

我看到值设置正确,但错误仍然有一个应用于标签的ng-hide.当我查看页面并手动更改输入值时,将删除ng-hide,如果我输入大于10的内容,则会显示错误.

  beforeEach(inject(function($compile, $rootScope) {
      element = angular.element('<config data="myData"></config>');
      $scope = $rootScope.$new();
      $scope.myData = {};
      element = $compile(element)($scope);
    }));

    it('should warn that we have a large number', function() {
      var input = element.find('[name="configItem"]')[0];
      $scope.$apply(function() {
        angular.element(input).val('9000000001');
      });
      errors = element.find('[class="form-error ng-binding"]');
      expect(errors.length).toBe(1);
    })

我正试图检测指令中输入值何时发生变化.我有以下指令:

import { ElementRef, Directive, Renderer} from '@angular/core';

@Directive({
    selector: '[number]',
    host: {"(input)": 'onInputChange($event)'}
})

export class Number {

    constructor(private element: ElementRef, private renderer: Renderer){

    }
    onInputChange(event){
        console.log('test');
    }
}

该指令中的问题是它仅在存在输入时检测,而不是在以编程方式更改值时检测.我使用重新形式,有时我用patchValue()函数设置值.我该怎么做才能触发更改功能？

我发现很难理解组件和指令之间的真正区别.我现在明白组件是一个更容易的概念.

因此,考虑到这一点,是否有任何理由在使用angular 1.5时继续使用指令？

也许我在这里错过了真实的上下文,但看起来组件提供了一个更简单的api.

那么我有什么理由继续使用指令呢？

Angular 2声明一切都是一个组件,所以努力从1.5迁移到2,那么只使用未来的组件是没有意义的吗？

在过去,我使用指令来创建,例如,自动查找文本框,没有理由我现在不应该在组件内执行此操作吗？然后我可以在我创建的其他组件中重用这个组件？

我一直在努力找出background-image在许多Angular 2组件中动态更改属性的最佳方法.

在下面的示例中,我尝试使用指令background-image将div设置为@Input值[ngStyle]:

import {Component, Input} from '@angular/core';
import { User } from '../models';

// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;

@Component({
  selector: 'profile-sidenav',
  styles: [ `
    .profile-image {
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
  `],
  template: `  
    <div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
    <h3>{{ username }}</h3>
  `
})

export class ProfileSidenav {
  @Input() user: UserInput;
  blankImage: string …

说我有以下标记:

<my-comp myDirective></my-comp>

有没有办法可以从指令访问组件实例？

更具体地说,我希望能够访问MyComponentfrom 的属性和方法MyDirective,理想情况下不向上面的HTML添加任何内容.