Question

我正在努力寻找一种将外部/超出范围/非角度函数传递给指令的优雅方法。到目前为止，我能看到的唯一方法是将函数名称作为字符串传递给angular，然后使用eval，这看起来并不那么好。以下是Plunker的一个例子 http://plnkr.co/edit/L9GGDkxwh4IGNufXB8yg?p=preview

使用extFunc：'＆amp;'在范围内仅适用于范围内的函数，因此对我不起作用。

有更好的方法吗？我在实例中意识到，只需在指令或控制器中包含该函数，但这并不总是实用的。

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

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

很抱歉，如果这个问题已被提出，但我无法在任何地方找到解决方案。

Answer 1

我将此功能作为服务导入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;
        }]);

应该有效（我还没有测试过）。

编辑：当有许多外部功能时替代

eval不是一个实用的解决方案，因为它无法访问您的示波器。

您可以将许多函数导入Angular，例如

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];
           });
    }]);

我并不是说这是一个超级干净的解决方案，但是这样你就可以将遗留库的功能暴露给Angular范围。它们现在应该在正常ng-click之类的工作中使用，并且可以访问您的范围。

将外部函数传递给Angular Directive

1 个答案: