current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 1 down vote favorite

I don't want to post too much Code here, I am currently just struggling with something basic.

I have a directive restricted as attribute:

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

    };
}

The Controller looks like this:

export interface IMyDirectiveScope{
    isTrue:boolean;
}

 export class MyDirectiveController implements IMyDirectiveScope{
    public isTrue:boolean;

    constructor() {
        this.isTrue = false;
    }
}

Now what I basically want, is to access the isTrue variable. Nothing more.

So here is my HTML, where I want to do this:

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

Just for some background-info, I want to toggle the some-other-directive which is kind of a sidemenu. Inside this I will do a require, where I will fetch the MyDirectiveController to also access the isTrue variable.

share|improve this question
up vote 0 down vote

I would say, you are almost there. There is a working plunker

I just adjusted a it your TS definitions:

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

and this template is working:

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

The vm is now available and can be used to access properties like title or isTrue.

Check it in action here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.