How to expose behavior from Element directive?

Question

I ran into a problem adapting the solution from How to expose behavior from a directive with isolated scope?. I wanted to expose my directive as an Element rather than as an Attribute:

Here's a JSFiddle. When you click the first button, which uses the Attribute approach, everything is ok. But the second button uses the Element approach and it gives an error.

Here is the code as well:

HTML:

<div ng-app="main">
    <div ng-controller="MyCtrl">Click the first button and everything is ok:
        <br>
        <button ng-click="callFnInAttribute()">Call Function in Attribute Directive</button>
        <br>{{errorViaAttribute}}
        <div my-attribute my-fn-via-attribute="fnInCtrlViaAttribute"></div>
        <br>
        <br>But click the second button and you get an error:
        <br>
        <button ng-click="callFnInElement()">Call Function in Element Directive</button>
        <br>{{errorViaElement}}
        <my-element my-fn-via-element="fnInCtrlViaElement"></my-element>
        <br>
        <br>The only difference is the type of directive used. Why does it work with an Attribute type of directive but not with an Element directive?</div>
</div>

JavaScript:

angular.module("main", []).controller("MyCtrl", function ($scope) {
    $scope.callFnInAttribute = function () {
        try {
            $scope.fnInCtrlViaAttribute();
            $scope.errorViaAttribute = "OK";
        } catch (anError) {
            $scope.errorViaAttribute = "Error: " + anError;
        }
    };

    $scope.callFnInElement = function () {
        try {
            $scope.fnInCtrlViaElement();
            $scope.errorViaElement = "OK";
        } catch (anError) {
            $scope.errorViaElement = "Error: " + anError;
        }
    };
}).directive("myAttribute", function () {
    return {
        require: 'A',
        scope: {
            myFnViaAttribute: '='
        },
        controllerAs: 'chartCtrl',
        bindToController: true,
        controller: function ($scope) {
            $scope.myFnViaAttribute = function () {
                console.log("myFnViaAttribute called");
            }
        }
    };
}).directive("myElement", function () {
    return {
        require: 'E',
        scope: {
            myFnViaElement: '='
        },
        controllerAs: 'chartCtrl',
        bindToController: true,
        controller: function ($scope) {
            $scope.myFnViaElement = function () {
                console.log("myFnViaElement called");
            }
        }
    };
});

This is using the following AngularJS version: https://code.angularjs.org/1.1.0/angular.min.js

How do I correctly expose the behavior from an Element?

Answer 1

I think your error simply comes from the fact that you wrote require instead of restrict in your directives. require is to make sure another directive is present in the same element, restrict is to define the HTML structure of your directive.

.directive("myAttribute", function () {
  return {
    restrict: 'A', // <-- and not "require"
    scope: {
      myFnViaAttribute: '='
    },
    controllerAs: 'chartCtrl',
    bindToController: true,
    controller: function ($scope) {
      $scope.myFnViaAttribute = function () {
        console.log("myFnViaAttribute called");
      }
    }
  };
})