标签: angular-directive

在阅读bindonce指令的文档时,我想知道bo-html和之间有什么区别bo-text.

• bo-html:

评估"标记"并将其渲染为元素内的html

• bo-text:

评估"文本"并将其作为文本在元素内打印

所以,我希望这段代码能够工作:

<span bo-html="<strong>SomeText</strong>"></span>

但我得到了这个:

Error: [$parse:syntax] Syntax Error: Token '<' not a primary expression at column 1 of the expression

<strong>作为一个基本的标记,不是吗？

如果这不起作用(可能是语法问题..),bo-text和之间的真正区别是bo-html什么？

我在下面收到错误,我不明白为什么.有任何想法吗？

HTML,

<button ng-click="loadForm()">Load Directive Form</button>
<div data-my-form></div>

棱角分明,

   app.directive('myForm', function() {
        return {
          replace:true,
          controller:function($scope){
            $scope.isLoaded = false;
            $scope.loadForm = function(){
              $scope.isLoaded = true;
            }
          },
          template: '<div ng-if="isLoaded" ng-include="\'form.php\'" ></div>',
          link:function(scope, element) {

          }
        }
    });

错误,

Error: [$compile:multidir] Multiple directives [ngInclude, ngInclude] asking for transclusion on: <div data-my-form="" ng-if="isLoaded" ng-include="'form.php'">

一个修复,

'<div><div ng-if="isLoaded" ng-include="\'form.php\'" ></div></div>'

但为什么我必须把它包装成div？这是一个有角度的错误吗？

我已经制作了一个自定义指令并使用了ng-model,但是当模型更新时,该指令即使我正在观看该事件.这是代码:

angular.module('Directives').directive("customDirective", ['$window', function ($window) {

return {
    restrict: "E",
    require: 'ngModel',
    scope: {
        ngModel: '=',
    },
    link: function (scope, elem, attrs, ngModel) {

        // IF the model changes, re-render
        scope.$watch('ngModel', function (newVal, oldVal) {
            render();
        });

        // We want to re-render in case of resize
        angular.element($window).bind('resize', function () {
            //this does work
            render();
        })

        var render = function () {
            //doing some work here
        };
    }
}}]);

和观点:

<div ng-repeat="product in pageCtrl.productList track by product.id">
<h3>{{ product.name }}</h3>
<custom-directive …

Angular 1.5引入了组件:

在Angular中,Component是一种特殊的指令,它使用更简单的配置,适用于基于组件的应用程序结构.

我似乎没有找到使用它们而不是指令的任何优点.据我所知,它们具有更少的功能(例如,没有更多compile或link功能),并引入了一些略有不同的语法.

使用它的文档因为它"更简单"并且有助于过渡到Angular 2,但我们仍然在Angular 2中有指令,对吧？有什么理由我应该将我的指令转换为我的Angular 1.5应用程序中的组件吗？

在我的有角度的应用程序中，我angucomplete-alt用于填充下拉列表。它运作良好。

我的数据中有个具有巨大的价值（4487），城市，但它会影响生成下拉列表和用户交互的性能。因此，是否可以限制angucomplete-alt-仅显示100个项目？以及当用户键入值时，它会从列表值中带来结果吗？

这该怎么做？有什么办法做到这一点？

现场演示

作为问题的后续问题:从Directive到Parent元素发出事件:Angular2

看起来当结构指令发出事件时,父组件不会接收它.

@Directive({ selector: '[appWidget]' })
export class WidgetDirective implements OnInit{
@Output() wdgInit: EventEmitter<any> = new EventEmitter();
@Input() set appWidget (wdg: any) {
    //display stuff
}
ngOnInit {
   this.wdgInit.emit();
}

widget.component.html:

  <ng-container *ngFor="let wdg of widgets">      
  <div *appTwitterWidget="wdg" >
  <ng-container>

widgetContainer.component.html:

 <app-widget [widgets]="widgetList" (wdgInit)="containerDoSomthing()"></app-widget>

在这种情况下,我发现从不调用containerDoSomthing().

如何动态地将*ngIf添加到使用属性指令修饰的元素？

对于一个简单的实验,我试过这个:

@Directive({
    selector: '[lhUserHasRights]'
})
export class UserHasRightsDirective implements OnInit, OnDestroy {
    constructor(private el: ElementRef) {
    }

    ngOnInit(): void {
        this.el.nativeElement.setAttribute("*ngIf", "false");
    }

    ...

,但它没有用.浏览器向我显示错误" 错误DOMException:无法在'Element'上执行'setAttribute':' ngIf'不是有效的属性名称. "

因此，我做了一个简单的指令，当输入无效时会抛出错误，但是当我尝试期望抛出成功时，这是正确的，但是当我not.toThrow()成功时，抛出错误。这告诉我我做错了事，但无法弄清楚是什么。有人可以帮忙吗？

测试

// Test component
@Component({
  template: `<div [addClass]="data"></div> `
})
class TestAddClassComponent {
   data: string | Array<string>;
}


describe('AddClassDirective', () => {
    let component: TestAddClassComponent;
    let fixture: ComponentFixture<TestAddClassComponent>;
    let element: DebugElement;

    beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [TestAddClassComponent, AddClassDirective]
        });
        fixture = TestBed.createComponent(TestAddClassComponent);
        component = fixture.componentInstance;
        element = fixture.debugElement.query(By.css('div'));
    });

    it('should throw error', () => {
       component.data = 'some-invalid-input';
       fixture.detectChanges();

       expect(component).toThrow();
       // Same result as:
       // expect(component).not.toThrow();

    });
});

指示

@Directive({
  selector: '[addClass]'
})
export class AddClassDirective implements …

我将Angular 6.0.5与Bootstrap 4.1.1一起使用，并且为下拉菜单添加了指令。但是我无法使其完全无效。我在这里看到了很多类似的问题，但Bootstrap 4却没有。这是下拉HTML：

<div class="btn-group" appDropdown>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" style="cursor: pointer"
           (click)="OnAddToShoppingList()">To Shopping List</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>

这是指令：

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.open') isOpen = false;

  @HostListener('click') toggleopen() {
    this.isOpen = !this.isOpen;
  }
}

我怀疑“公开”课。而且我认为这是Bootstrap 3中已弃用的类，那么Bootstrap 4中的替代方法是什么？

我已经从https://www.davebennett.tech/angular-4-input-numbers-directive/创建了一条指令，以便可以限制用户仅在电话号码中输入数字。在src/app/app.sharerd.module.ts文件中，我做了以下代码来导入指令：

import { NumberOnlyDirective } from './number.directive';
declarations: [..., ..., NumberOnlyDirective], ...
export class SharedModule { }

现在，在/src/文件夹下，我创建了名为的文件夹modules/auth/component/。

在auth.module.ts该/src/auth/文件夹下，我已执行以下操作：

import { NgModule } from '@angular/core';
import { SharedModule } from '../../app/app.shared.module';
...
...

现在，在signup.html下面/src/auth/component/：

<input type="text" name="phone" myNumberOnly ... > ...
...

我仍然可以在文本框中输入字符/特殊字符等，但是在console / cli中没有看到任何错误。