CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Charlie Patton
Charlie Patton

Reputation: 445

Function (expression) binding not working

I can't figure out why this plnkr isn't working.

I'm trying to bind a simple function from a parent controller to a child custom directive. If I use &, it doesn't work, but if I use = or <, it works fine. I understand this is bad practice, but why does it work and & doesn't? Maybe I'm missing something very simple?

Here's the script:

JS

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>

Upvotes: 1

Views: 318

Answers (1)

Estus Flask
Estus Flask

Reputation: 223064

& binding provides a wrapper function to execute an expression. So all that dir.fn() does is getting test property.

The documentation says,

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name.

To make it work as expected it should be

<my-directive fn="main.test()"></my-directive>

Upvotes: 1

Related Questions