Как вызвать действие пользовательской директивы в AngularJS?

Question

В AngularJS вы можете сделать кнопку, чтобы вызвать действие, как это:

<div ng-controller="myController"> 
    <button ng-click="onButtonClicked()">Click me</button> 
</div> 

Итак, я вставить пользовательскую директиву так:

и в связи функции I my-canvas.js ДИРЕКТИВА файла замените тег на холст KineticJS. Затем пользователь манипулирует холстом, перетаскивая фигуры Kinetic и, наконец, когда пользователь делает с фигурами то, что он должен делать, я хочу, чтобы директива вызывала действие, определенное на myController. Я думаю о чем-то вроде этого:

<div ng-controller="myController"> 
    <my-canvas ng-success="onScenarioSuccess" /> 
</div> 

но я не могу понять, как правильно это сделать.

Как я могу сделать директиву, чтобы вызвать ее действие/событие программно?

Answer 1

Если вы хотите, чтобы ваша директива открывала API для привязки к поведению, вы должны использовать область изоляции и использовать локальную область видимости &. Это позволяет вам передать функцию, которую может вызывать директива. Вот простой пример:

.directive('testDirective', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      action: '&' 
     }, 
     template: '<button ng-click="action()">Test</button>' 
    }; 
}); 

И использовать его как:

<test-directive action="myControllerFunction()"></test-directive> 

Согласно документации:

& связывание позволяет директива, чтобы вызвать оценку того или иного выражения в контекст первоначальной сферы действия в определенное время. Любое юридическое выражение разрешено, включая выражение, которое содержит вызов функции. Из-за этого привязки & идеально подходят для функций обратного вызова для директивного поведения.

В разделе documentation содержится более подробная информация.

Answer 2

Если вы хотите открыть собственное событие, например ng-success, и хотите вызвать функцию в событии. Вы можете либо сделать то, что @Beyers упомянул, используя изолированную область.

Или посмотрите исходный код ng-click, он просто обертывает событие javascript внутри $ scope.apply, используя службу $parse для оценки переданного им выражения. Что-то вроде этого можно добавить в вашу функцию связи

var fn = $parse(attr['ngSuccess']); 
element.on('someEvent', function (event) { 
    var callback = function() { 
     fn(scope, { 
      $event: event 
     }); 
    }; 
    scope.$apply(callback); 
}); 

Преимущество этого механизма в том, что изолированная область не создана.