Wie kann ich eine Variable in einer Angular-Direktive ändern?

Question

Ich versuche, einen einfachen Toggle für ein HTML-Tooltip-Element innerhalb der HTML einer Angular-Direktive zu erstellen. Ich definiere das Attribut in der Komponente, und ich habe überprüft, dass es an die Direktive übergeben wird, aber egal was ich im HTML versuche, ändert es nicht den Wert des Attributs.

Hier ist meine Komponente:

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

die HTML-Templates aus hier:

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

Und hier ist der HTML-Code für die Richtlinie:

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

Jede Hilfe ist willkommen, danke!

Answer 1

Ich würde vorschlagen, Funktionen zu schreiben, wie folgt:

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

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

dann Ihre HTML-Code wie folgt ändern:

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

bitte lassen Sie mich wissen, ob das funktioniert oder nicht!

viel glück