CODEWITHSUNDEEP
angularjsangularjs-directivetypescript
Scott Ferguson
Scott Ferguson

Reputation: 419

How to bind attributes in an Angular directive using TypeScript?

Using AngularJS 1.5 and TypeScript I am writing a directive and want to define an attribute in my view that gets passed into the directive and then used to output to a template. I have tried to follow some examples such as this one, but my directive template isn't binding to the attribute.

HTML from page:

<my-directive name="John"></my-directive>

Directive:

module myApp.directives {
    "use strict";

    export class myDirective {
      static directiveId = 'myDirective';
      scope = {};
      bindToController = {
        name: '='
      };
      restrict = 'EA';
      controller = controllers.NameController.ControllerId;
      controllerAs = 'vm';
      template = '<h1>Name: {{ vm.name }}</h1>';

      static $inject = [];
      constructor() { }

      static instance() {
        return new myDirective();
      }
    }
    angular.module("myApp").directive(myDirective.directiveId, myDirective.instance);
}

Controller (not really sure I need anything in the constructor?):

module myApp.controllers {
    "use strict";

    export class NameController {
        static ControllerId = "NameController";
        name: string;

        constructor(name: string){
            this.name = name;
        }
    }

    angular.module("myApp").controller(NameController.ControllerId, NameController);
}

Upvotes: 0

Views: 1763

Answers (3)

Hugues Stefanski
Hugues Stefanski

Reputation: 1182

Your bindToController should accept a string litteral and not a bound property, i.e.

bindToController = { name: '@' };

the = will try to evaluate a property called John in your syntax, which does not exist.

Also, your constructor does not need any parameter, and for what I see can be totally removed.

Upvotes: 2

Abhishek
Abhishek

Reputation: 143

I believe the attribute you need should be defined on the directive scope, seeing as you are already using isolated scope. Doesn't look like you are using bindToController anywhere.

Instead of this:

scope = {};
bindToController = {
  name: '='
};

Try with this (older syntax):

scope = {
  name: '='
};

Also, the parameterized constructor in controller won't run since you aren't new-ing up the class (in the line below, from your second code snippet)

angular.module("myApp").controller(NameController.ControllerId, NameController);

Upvotes: 0

uthomas
uthomas

Reputation: 754

I'm not sure this helps, neither how angular is merging instance of NameController and $scope together, but I can imaging that name property of NameController instance is shadowing $scope.name.

Would you try removing:

name: string;

constructor(name: string) {
  this.name = name;
}

?

Upvotes: 0

Related Questions