将$ element作为参数发送到外部函数指令

Question

我有以下指令.js

angular.module('myDirective',[])

.directive('inputBox',function(){
    return{
        restrict:"E",
        controller:['$scope','$element',function($scope,$element){
            $scope.printMessage = function(){
                $scope.inputval = 'Enter input here';
                var myelem = $element;
                console.log(myelem[0]);
                return $scope.onButtonClicked({widgetEvent:$element});
            };
        }],
        scope:{
            buttonName:"@",
            printedMessage:"@",
            onButtonClicked:"&"
        },
        template:'<input type="text" ng-model="inputval"><button ng-click="printMessage()">{{buttonName}}</button>'
    };
})

这是我的HTML：

My Directive: <input-Box button-Name="Click Me!!" on-button-clicked="showAlertMessage(widgetEvent)"><input-Box>

我有这样的App.js模块：

angular.module('myApp',['myDirective'])
.controller('myController',['$scope',function($scope){
    $scope.showAlertMessage = function(e){
        alert('this is a alert');
        console.log(e);
    };
}]);

我想传递$ scope属性$ scope.onButtonClicked（），但我收到错误“不允许在Angular表达式中引用DOM节点”，我可以通过它的方式是什么？