如何更改Angular指令的变量?

时间:2017-06-29 22:24:22

标签: javascript angularjs angularjs-directive angularjs-scope components

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

这是我的组成部分:

dynamic

这里是父模板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>

感谢任何帮助,谢谢!

1 个答案:

答案 0 :(得分:1)

我建议按如下方式编写函数:

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

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

然后按如下方式更改您的html代码:

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

请告诉我这是否有效!

祝你好运