Функция обратного вызова в угловой директиве

Question

Я хочу иметь функцию обратного вызова по директиве, которую я написал, не создавая изолированный объем. Директива просто делает элемент изменяемым по размеру и, следовательно, не нуждается в отдельной области (и желательно, чтобы у меня не было выделенной области в этом случае, я думаю).

Каков наилучший способ для этого? Я попробовал,

.controller("MyController", function ($scope) { 
    $scope.myFunc = function() { 
     console.log("test"); 
    }; 
}) 
.directive('resizeable', function ($document, $parse) { 
    return function (scope, element, attr) { 
     var func = $parse(attr.onFunc); 
    } 
} 

с

<div class="main" resizeable="" on-Func="myFunc()"> 

Как это сделать?

Попробуйте JSFiddle.

Answer 1

Вы близки, вот что я хотел бы сделать:

.directive('resizeable', ['$document', '$parse', function ($document, $parse) { 
    return { 
     link: function ($scope, $element, $attrs) { 
     var func = $parse($attrs.resizeable); 

     // do stuff... 

     func($scope); 
     } 
    }; 
}]); 

И HTML будет:

<div data-resizeable="myFunc()"></div> 

Вот рабочий пример: http://plnkr.co/edit/as6Tylj0zPpjVsUaDDC6?p=preview

Answer 2

on-Func="myFunc" 

Без скобок. И в директиве:

var func = scope[attr.onFunc]; 

Директива находится в том же объеме, что и контроллер. Таким образом, вы можете напрямую обратиться к функции.