2015-01-03 4 views
0

Я стараюсь найти элегантный способ передачи внешней/вне сферы/неглавной функции в директиву. Пока единственный способ, которым я мог это сделать, - передать имя функции как строку в угловое, а затем использовать eval, который не кажется таким приятным. Вот пример того, что на Plunker http://plnkr.co/edit/L9GGDkxwh4IGNufXB8yg?p=previewПередача внешней функции в угловую директиву

Использование extFunc: «&» в рамках работы только для функций в объеме, так что не работает для меня.

Есть ли лучший способ сделать это? Я понимаю, что в моем примере можно просто включить функцию внутри директивы или контроллера, но это не всегда практично.

<script> 
function nonAngularFunction(someText) { 
    alert(someText); 
} 
<script> 

<my-directive ext-func="nonAngularFunction('Hi there')" ></my-directive> 

Извините, если этот вопрос уже задан, но я не смог найти решение в любом месте.

+0

Вы когда-нибудь находили решение этого вопроса? – Ninjarabbi

ответ

0

Я бы импортировать эту функцию в мире ANGULAR как услуга:

/* global nonAngularFunction:false */ 
angular.module('aModuleName', []) 
    .value('nonAngularFunction', nonAngularFunction); 

Затем вы можете использовать инъекции и импортировать функцию в Вашей области:

// ... in your directive or controller 
angular.module('maybeAnotherModule', ['aModuleName']) 
    .controller('YourController', ['$scope', 'nonAngularFunction', 
     function ($scope, nonAngularFunction) { 

      $scope.nonAngularFunction = nonAngularFunction; 
     }]); 

Должен работать (I гавань» t проверил его).

Edit: Альтернатива, когда есть множество внешних функций

eval не является практичным решением, так как он не имеет доступа к вашим прицелов.

Вы можете импортировать множество своих функций в Угловые, например.

angular.module('aModuleName', []) 
    .value('myHorribleLib', { 
     'oneFunction': oneFunction, 
     'Constructor1': Constructor1, 
     ... 
    }); 

Тогда вы должны сделать их доступными по $scope.legacyLib = myHorribleLib и использовать его с префиксом: ng-click="legacyLib.oneFunction('hello')". Немного многословный, но вы держите глаза на то, что является наследием.

Или вы просто расширить $rootScope (или область видимости верхнего уровня) с помощью методов:

angular.module('aModuleName', []) 
    .run(['$rootScope', '$window', function ($rootScope, $window) { 
     'oneFunction Constructor1 anotherFunction ...' 
      .split(' ').forEach(function (f) { 
       $rootScope[f] = $window[f]; 
      }); 
    }]); 

Я не говорю, что это супер-чистое решение, но таким образом вы могли бы выставить функции ваша библиотека устаревших объектов. Теперь они должны работать в обычном ng-click и тому подобное и иметь доступ к вашей области.

+0

Проблема в том, что я хочу, чтобы эта директива была повторно использована внутри сайта. Угловой код заключается в замене старого элемента управления DevExpress (который является ужасным во всех смыслах слова). Существует много существующих javascript (не угловых), с которыми нужно работать, и это делается по-разному во всех применениях старого элемента управления. Мне нужно передать функции триггера и обратного вызова. В идеале это будет идти прямо в директиву HTML и не требует изменения кода приложения или директивы. –

Смежные вопросы