如何在角指令上改变变量?

I'm trying to create a simple toggle for an HTML tooltip element within the HTML of an Angular directive. I am defining the attribute in the component, and I have verified it is being passed to the directive, but no matter what I try in the HTML, it doesn't modify the attribute's value.

我试图在一个角度指令的HTML中为HTML工具提示元素创建一个简单的toggle。我定义了组件中的属性，我已经验证了它被传递给了指令，但是无论我在HTML中尝试什么，它都不会修改属性的值。

Here's my component:

这是我的组件:

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;
}

Here's the parent template html:

这里是父模板html:

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

And here's the HTML for the directive:

这是指令的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>

Any help is appreciated, thanks!

有任何帮助，谢谢!

1 个解决方案

#1

I would suggest to write functions as follows:

我建议写以下功能:

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

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

then change your html code as follows:

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

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

< div ng-mouseover = " hoverIn()“ng-mouseleave =“hoverOut()类=“触发”> | < / div >

please let me know if this works or not!

请告诉我这是否有效!

good luck

祝你好运

#1