I'm struggling to understand why this plunker isn't functioning properly.
The issue lies in my attempt to bind a basic function from a parent controller to a custom directive within a child element. Surprisingly, using = or < works fine, whereas utilizing & does not produce the desired outcome. Even though I acknowledge that this approach may not be best practice, I am puzzled as to why it functions with one method and fails with another. Could there be something obvious that I am overlooking?
Below is the relevant script:
Javascript
var app = angular.module('myApp',['ngMaterial']);
app.controller('mainCtrl',mainCtrl);
function mainCtrl(){
var main = this;
main.test = function(){console.log("test")};
}
app.directive('myDirective',myDirective);
function myDirective(){
return {
scope: {},
controller: myCtrl,
controllerAs: "dir",
bindToController: {
//fn: '&' //This doesn't work
fn: '<' // This works
},
template: '<md-button ng-click="dir.fn()" class="md-raised">click</md-button>'
};
function myCtrl(){
}
}
HTML
<div ng-app="myApp" ng-controller="mainCtrl as main">
<my-directive fn="main.test"></my-directive>
</div>