我正在学习AngularJs并且正在尝试运行自定义指令.我有一个按钮,单击按钮,我需要处理控制器内的事件.我没有得到函数调用ng-click指令.我附上plnkr链接:链接到plnkr

// Code goes here
angular.module("app", []);

angular.module('app').controller('mainCtrl', function($scope){
  
  $scope.developer={
    name: "Pradeep Kumar L",
    age: 32,
    city: "Bengaluru",
    friends:[
      "Praveen",
      "Kori",
      "Kiran"
      ]
  }
 
 $scope.handleClick = function(){
   developer.rank="friend";
    console.log("button clicked..");
  }

});

angular.module('app').directive('mySimpleDirective', function(){
  return{
    restrict: "E",
    templateUrl: 'userInfoCard.html'
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="panel panel-primary">
  <div class="panel-heading">
  <h4>{{developer.name}}</h4>
  </div>
  <div class="panel-body">
    <span ng-show='!!developer.age'><h4>User age:  {{developer.age}}</h4></span>
    <h4>User city: {{developer.city}}</h4>
    <h4>Friends</h4>
    <ul>
      <li ng-repeat="friend in developer.friends">
        {{friend}}
        
      </li>
    </ul>
    <div ng-show="!developer.rank">
      Rank: {{developer.rank}}
    </div>
    <div ng-show="!developer.rank"> …

Stack: Typescript 1.7 + Angular 1.49

摘要:

我有一个指令.我想要$inject棱角分明的$timeout服务.它在指令的控制器功能中工作正常,但在链接功能中没有.我错过了什么？

问题:

• 我做错了什么？
• 是否有更好$inject的$timeout依赖方式？
• 为什么$timeout服务在指令的控制器中工作而不是链接？

MyDirective.ts:

module app.directives {

    export class MyDirective {
        priority = 0;
        restrict = 'E';
        templateUrl = 'template.html';
        scope = {
            'items': '='
        };
        controller = MyController;
        link = MyLink;

        static $inject = ['$timeout'];

        constructor(private  $timeout:ng.ITimeoutService) {
        }
    }

    function MyController($scope:ng.IScope, $timeout:ng.ITimeoutService) {
        console.log("controller", $timeout); // function timeout(fn,delay,invokeApply){ the guts here }
        $timeout(function () {
            console.log("This works fine");
        },3000); …

我有两个并行指令(与父子一样),如果可能的话,我希望它们通过使用observable的服务进行通信.我已经阅读了官方组件交互guidline,但它讨论了父子互动.我尝试用两个指令制作一个plunker但它不起作用.

基本上,我想要的是创建一个服务:

export class DirService {
   contentSource = new Subject();
   content$ = this.contentSource.asObservable();
}

然后,使用此服务在<dir1>和<dir2>之间建立桥梁.有人能指出如何实施这个senerio？

顺便说一句,我选择使用observable主要是因为:

• 我在这篇帖子中读到了帖子.
• 如果我想要许多指令进行通信,我猜可观察可以使逻辑更清晰.

谢谢!

我正在编写一个指令，它有 2 个@Input()变量，并从使用该指令（如组件）的人那里获取价值。

一切安好。唯一的问题是，当有一个Observable.subscribe在构造函数，那么@Input值在构造函数中，没有可用Observable.subscribe的@Input()变量值undefined

我知道获取@Input()指令变量的更好方法是在生命周期钩子中访问它们，例如ngOnInitorngOnChange但我的问题是：为什么这在某些情况下可用，而在其他情况下在指令中不可用。

<div authorizedme
     [permission]="'manager'"
     [auth]="department"
     class="col-2 data-object-link">your salary is $90,000,0000

指示

如果在subscribe代码下方的指令构造函数中存在，则权限和身份验证可用，如果已注释掉，则两个@Input()变量都是undefined.

this.userService.getUser().subscribe((user) => {
  this.user = user;
  if (this.authorized()) {
    this.elementRef.nativeElement.style.display = 'block';
  }
});

下面是整个指令代码

@Directive({
  selector: '[authorizedme]'
})
export class AuthorizedDirective implements OnInit {

  @Input() permission: string;
  @Input() auth: string;
  private user: any;

  constructor(private elementRef: ElementRef, private currentUserService: userService) { …

我已经查看了有关此错误的问题,但尚未找到解决方案.

我有一个高亮指令,我接受输入index.当我在我正在使用它的模块中声明它时,该指令有效.但是我想在几个模块中使用它,所以我删除了声明,并将它放在导入错误的根模块中.那是我收到错误的时候:

 Error: Template parse errors:
Can't bind to 'index' since it isn't a known property of 'div'. ("
                <div class="read row"
                    appListHighlight
                    [ERROR ->][index]="index"
                >
                    <div class="col"></div>
"): ng:///NetworkModule/DnsComponent.html@15:20

我的指示:

import { Directive, Input, Renderer2, ElementRef, HostBinding, OnInit } from '@angular/core';

@Directive({
    selector: '[appListHighlight]'
})
export class ListHighlightDirective implements OnInit{
    @HostBinding('style.backgroundColor') backgroundColor = 'transparent';

    @Input() index: string;

    constructor() {}

    ngOnInit() {

        console.log('APP', this.index);

        if (+this.index % 2 === 0) {
            this.backgroundColor = 'rgba(128, 128, 128, 0.08)'
        } …

如何在我的角应用程序中实现侧边栏切换菜单.我对如何在其他组件中调用侧边栏菜单感到困惑.我的切换按钮位于标题组件上.当我单击标题组件上的切换按钮时,它的目的是显示侧边栏菜单.

header.component.html

  <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
              <div class="brand-text"><span>MCDONALDS</span></div></a></div>

sidebar.component.html

<nav class="side">
  <h1>CLICK TO Show Me</h1>
  </nav>

core.component.html

<app-header></app-header>
<app-sidebar></app-sidebar>

我创建了一个自定义指令@Directive，我正在使用@HostListener该指令并且代码工作正常。
现在，在编写测试用例时，我需要@HostListener从单元测试用例中调用该方法。我也可以看到在代码覆盖率中没有覆盖代码。
以下是代码：

focus-encapsulation.directive.ts

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

@Directive({
  selector: '[appFocusEncapsulation]'
})
export class FocusEncapsulationDirective {

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event'])
  keyDown(event: Event) {
    console.log('event : ', event);
    event.preventDefault();
  }

}

focus-encapsulation.directive.spec.ts

import { FocusEncapsulationDirective } from './focus-encapsulation.directive';
import { Component, ElementRef, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser";

@Component({
  template: `<div appFocusEncapsulation><button type="button" (click)="add()">ADD</button></div>`
})
class TestHoverFocusComponent …

我在组件中有父子关系。如果我更新父组件中的值绑定对象，那么它必须在子组件中通知。

子组件

export class childComponent implements OnChanges {
@Input() data = { name: "Datta" };

ngOnChanges() {
  console.log('updated');
}

父组件.html

<child-com [data]="localData"></child-com>
<button (click)="buttonClick()">changeData</button>

父组件

 export class ParentComponent  {
localData: any;

buttonClick() {
  this.localData.name = "sagar";
}

如果我更改绑定对象的引用，则它会反映，但如果我更新对象中的特定值，则不会反映。

我在Angular 6中做了一个Web应用程序.我从Firebase接收了一组对象,我正在尝试向用户显示详细信息ngFor.我的对象数组是这样的:

export interface Competition {
  createdAt: Date;
  sessions: Session[];
}

export interface Session {
  date: Date;
  program: Program[];
  events: Event[];
}

export interface Program {
  name: string;
}

export interface Event {
  name: string;
}

在我正在做的模板内:

<ng-container *ngFor="let competition of competitions; index as i">
   <h3>{{competition.name}}</h3>
   {{competition.sessions[i].program.length}}
   {{competition.sessions[i].events.length}}
</ng-container>

读取未定义的属性"program",读取未定义的属性"events"

我试过了:

{{competition[i].sessions[i].program.length}}
{{competition.sessions[i].program.length}}
{{competition[i].sessions[i].program[i].length}}

我的目标是显示的长度program和events.

我以数组形式获取数据，[ 'one', 'two', 'three', 'four', 'five', 'six']我想以表格格式显示如下，

    <table>
    <caption> Numbers:</caption>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
    </tr>
    </table>

上面的模板可以使用ngFor＆动态生成ngIf吗？

因此，在每个（索引％3）= 0时，我们都将绘制新行，但是如何在带有angular指令的HTML中这样做呢？

这里的技巧是传入数组可以具有任意数量的字符串。