Angular 访问 HTML 中的 Directive-Controller 变量

Posted 2023-03-13

【中文标题】Angular 访问 HTML 中的 Directive-Controller 变量

【英文标题】：Angular access Directive-Controller Variables inside HTML

【发布时间】：2016-10-24 15:48:57

【问题描述】：

我不想在这里发布太多代码，我目前只是在为一些基本的东西而苦苦挣扎。

我有一个指令被限制为属性：

export class MyDirective implements ng.IDirective 
    bindToController = true;
    controller = MyDirectiveController;
    controllerAs = "vm";
    restrict = "A";
    scope = true;
    constructor()

    ;

控制器如下所示：

export interface IMyDirectiveScope
    isTrue:boolean;


 export class MyDirectiveController implements IMyDirectiveScope
    public isTrue:boolean;

    constructor() 
        this.isTrue = false;
    

现在我基本上想要的是访问isTrue 变量。仅此而已。

这是我的 html，我想在其中执行此操作：

<div my-directive>
    <ul>
        <button type="button" ng-click="vm.isTrue = !vm.isTrue"></button>
     </ul>
    <some-other-directive ng-show="vm.isTrue"></some-other-directive>
</div>

只是为了一些背景信息，我想切换some-other-directive，这是一种侧面菜单。在这里面我将做一个要求，我将在其中获取 MyDirectiveController 以访问isTrue 变量。

【参考方案1】：

我想说，你快到了。有a working plunker

我刚刚调整了你的 TS 定义：

namespace MyStuff 
  export interface IMyDirectiveScope
    isTrue:boolean;
  

  export class MyDirectiveController implements IMyDirectiveScope
    public isTrue:boolean = false;
    public title: string = "the directive title";
  

  export class MyDirective implements ng.IDirective 
    bindToController = true;
    controller = MyDirectiveController;
    controllerAs = "vm";
    restrict = "A";
    scope = true;
  

  var app = angular.module('MyApp');

  app.directive("myDirective", () => new MyDirective());

这个模板正在工作：

<div my-directive> 
    title: <var>vm.title</var> - isTrue: <var>vm.isTrue</var>
    <ul>
        <button type="button" ng-click="vm.isTrue = !vm.isTrue">click it</button>
     </ul>
    <h2 ng-show="vm.isTrue">vm.title</h2>
</div>

vm 现在可用，可用于访问title 或isTrue 等属性。

在行动中检查它here