javascript - Typescript Angularjs Controller Scope undefined when calling from Directive -

i'm quite new angularjs , typescript.

i'll try keep things short here:

the directive (directives/bikedirective.ts):

class bikedirective {     constructor() {         var directive: ng.idirective = {};         directive.restrict = "e";         directive.scope = {             move: "="         };         directive.template = '<div>the bike</div>';         directive.link = (scope, element, attrs: any) => {             element.on('click', (e) => {                 scope.move('moving!');             });         }         return directive;     } } export = bikedirective; 

the controller (controllers/mycontroller):

class mycontroller {     whatever: string;     constructor(public scope) {         this.whatever = "whatever";         scope.vm = this;     }     onmove(msg: string) {         console.log(this.whatever);     } } export = mycontroller; 

the html:

    <div ng-controller="mycontroller">         <my-bike move="vm.onmove"></my-bike>         <my-bike move="vm.onmove"></my-bike>     </div> 

app.ts

import mycontroller = require("controllers/mycontroller"); import bikedirective = require("directives/bikedirective");  class app {     constructor() {         var app = angular.module('app', [])             .controller('mycontroller', ['$scope', mycontroller])             .directive('mybike', [bikedirective]);     } } export = app; 

main.ts

require.config({     baseurl: '.',     paths: {         jquery: './scripts/jquery-2.1.0',         angular: './scripts/angular'     },     shim: {         'angular': {             exports: 'angular'         }     } });  require(['app','angular','jquery'], (app, angular, $) => {     new app;     angular.bootstrap(document.body, ['app']); }); 

i hope above code self explanatory. basically, want when clicking on 1 of bikes (my-bike directive) mycontroller.onmove() function run. works fine. problem having when onmove executed console.log(this.whatever) outputs undefined, shouldn't output string "whatever"? seems scope of mycontroller not available in onmove() stub.

i tried in plain angularjs (without typescript) , works fine, missing something.

has experienced before?

i followed .vm technique used basarat in video: http://www.youtube.com/watch?v=wdtvn_8k17e

thanks

issue

the issue in move="vm.onmove" passing reference function directive i.e.

        directive.scope = {             move: "="         }; 

calling reference function disconnects this.

quick fix:

onmove = (msg: string) => {     console.log(this.whatever); //okay } 

this explains this bit more: https://www.youtube.com/watch?v=tvocucbcupa&hd=1

better fix:

don't pass functions directives i.e. don't use = functions. instead use & i.e.

        directive.scope = {             move: "&"         }; 

and call html i.e. <my-bike move="vm.onmove()"></my-bike>. calling function vm. i.e. vm.onmove() ensures this correct inside function.

also not related issue

element.on callback not called in angular context ... might want wrap callback in $scope.$apply