Question

我不想在这里发布太多代码，我目前正在努力解决一些基本问题。

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

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，这是一种侧面菜单。在这里我将做一个require，我将获取MyDirectiveController以访问isTrue变量。

Answer 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

HTML中的角度访问指令 - 控制器变量

1 个答案: