如何更改 Angular 指令上的变量？

Posted 2023-02-23

【中文标题】如何更改 Angular 指令上的变量？

【英文标题】：How can I change a variable on an Angular directive?

【发布时间】：2017-12-03 18:57:47

【问题描述】：

我正在尝试为 Angular 指令的 html 中的 HTML 工具提示元素创建一个简单的切换。我在组件中定义属性，并且我已经验证它正在传递给指令，但是无论我在 HTML 中尝试什么，它都不会修改属性的值。

这是我的组件：

import  Component, Input, OnChanges, SimpleChanges from '@angular/core';
import  Utils  from './utils';
@Component(
  selector: 'm-chart',
  templateUrl: './m.component.html',
  styleUrls: ['./s-chart.scss']
)
export class MembersChartComponent implements OnChanges 
  constructor (private utils: Utils) 
  @Input() membersData:any;
  @Input() infoModalOpen:boolean;

这是父模板html：

<div class="row no-margin">
      <m-chart *ngIf="summaryData && summaryData.members" 
      [mData]="summaryData.members" infoModalOpen="false"></m-chart>
</div>

这是指令的 HTML：

<div class="row">
  <div ng-mouseover="infoModalOpen = !infoModalOpen" ng-mouseleave="infoModalOpen = !infoModalOpen" class="trigger">|</div>
  <div ng-show="infoModalOpen">Tooltip content here</div>
</div>

感谢任何帮助，谢谢！

【参考方案1】：

我建议编写如下函数：

$scope.hoverIn = function()
  this.hoverEdit = true;
;

$scope.hoverOut = function()
    this.hoverEdit = false;
;

然后改变你的html代码如下：

<div ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" class="trigger">|</div>

请让我知道这是否有效！

祝你好运

【讨论】：

你会把这些函数放在哪里？

在你的类 MemberChartComponent 之后的布尔值

感谢 Abdullah - 我最终改用 css - 更改元素的可见性。