标签: directive

该应用程序有一个控制器，它使用服务来创建视频播放器的实例。视频播放器每隔几秒就会触发事件来显示进度。当视频到达某个点时，我想在视频播放器顶部显示一个小部件。

该视图将小部件包装在 ng-show 指令中。

在触发事件并填充值后，dom 元素需要超过 60 秒的时间才能接收到删除 ng-hide 类的信号。

如果我尝试使用普通的 dom 方法（如 document.getElementById(eleId).innerHTML = newHTML）来实现这一点，更新是即时的。

我究竟做错了什么？以下是完整的代码序列：

控制器：

MyApp.controller('SectionController', ['$scope', 'PlayerService'], function($scope, PlayerService){
$scope.createPlayer = function() {
    PlayerService.createPlayer($scope, wrapperId);
}});

服务：

MyApp.service('PlayerService', [], function(){

this.createPlayer=function(controllerScope, playerWrapper){

    PLAYER_SCRIPT.create(playerWrapper) {

        wrapper : playerWrapper,
        otherParam : value,
        onCreate : function(player) {

            player.subscribe(PLAY_TIME_CHANGE, function(duration){
                showWidget(controllerScope, duration);
            })

        }
    }

}

function showWidget(controllerScope, duration) {
    if(duration>CERTAIN_TIME) {
        $rootScope.widgetData = {some:data}
        $rootScope.showWidget = true;
    }

}});

看法：

<div ng-show="showWidget">  <div class="wdgt">{{widgetData.stuff}}</div>  </div>

我是angular指令的新手，所以我创建了如下指令：

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

@Directive({
  selector: "[bonusCard]"
})
export class BonusCard {
  @Input() bonus: string;
  @Input() amount: string;
  @Input() isSeleted: string;
  constructor(private el: ElementRef){
    el.nativeElement.innerHTML = this.getTemplate()
  }

  getTemplate(){
    return ''+
      '<div>'+
        '<div class="bonus">'+this.bonus+'</div>'+
        '<div class="amount">'+this.amount+'</div>'+
        '<div class="radio '+(this.isSeleted?'is_seleted':'')+'"></div>'+
      '</div>' +
      '';
  }
}

我在模板中使用此指令，如下所示：

  <div class="column col-3" *ngFor="let b of bonusJson;let i = index" bonusCard [bonus]="b.bonus" [amount]="b.amount" [isSeleted]="i==activeBonus"></div>

其中变量定义如下：

bonusJson = [{
    bonus:1500,
    amount:2000
  },{
    bonus:1000,
    amount:1000
  },{
    bonus:500,
    amount:500
  },{
    bonus:0,
    amount:100 …

我有一个角度形式，我想建议用户根据他正在写的内容在输入中输入什么。

我显然可以使用指令 onChange 并对服务进行 api 调用，该服务在每次更改后提出建议。但我认为这不是一个好的实现，因为我会做与用户写的字母一样多的调用（以及可能的拼写错误）。所以这个想法是让这个 onChange 函数只在对字段进行 X 更改后才进行 api 调用。我怎样才能做到这一点？如何检查该字段是否已更改到足以进行另一个 api 调用以获取新建议？

我想根据常量值定义一些函数：

#define mode 5

#if mode & 2 != 0
  // function 1
#endif

#if mode & 4 != 0
  // function 2
#endif

这听起来和看起来都很奇怪，但我想使用一个常量来定义和激活一些程序模块。
定义mode = 2包括功能1、mode = 4包括功能2并且mode = 6包括两个功能。有一个问题：像、、或 这样
的比较运算符似乎在指令中不起作用，并且语句总是被执行。==!=><#if

我究竟做错了什么？我是否想做一件愚蠢或不可能的事情？