Question

我创建了一个简单的指令：

angular.module("foo").directive('bar',function(){
    return {
        ...
        template:
            '<div> \
                <div ng-hide="param1.length == 0 && param2...">...</div> \
                <input ng-show="param1.length == 0 && param2..." .../> \
             </div>',
        scope: {
            param1: '=',
            param2: '='
        }
    };
});

但是模板中有一个复制的复杂逻辑，所以我想把它提取到一个函数中，然后从模板中调用该函数。我在哪里可以放这样的功能，我该如何调用它？我是否必须创建专用控制器？

Answer 1

在链接功能中：

return {
    ...,
    template: '<div><div ng-hide="foo()">...</div></div>',
    link: function(scope) {
        scope.foo = function() {
            return scope.param1.length == 0 && ...;
        };
    }
};

Answer 2

您使用声明服务以角度来实现此目的。来自angular docs（https://docs.angularjs.org/guide/services）

Angular服务是连接在一起的可替代对象使用依赖注入（DI）。您可以使用服务来组织和在您的应用中共享代码。

Answer 3

这是一个简单，紧凑且易于理解的方法首先，在你的js中添加一项服务。

app.factory('Helpers', [ function() {
      // Helper service body

        var o = {
        Helpers: []

        };

        // Dummy function with parameter being passed
        o.getFooBar = function(para) {

            var valueIneed = para + " " + "World!";

            return valueIneed;

          };

        // Other helper functions can be added here ...

        // And we return the helper object ...
        return o;

    }]);

然后，在您的控制器中，注入您的帮助程序对象并使用任何可用的函数，如下所示：

app.controller('MainCtrl', [

'$scope',
'Helpers',

function($scope, Helpers){

    $scope.sayIt = Helpers.getFooBar("Hello");
    console.log($scope.sayIt);

}]);

在角度指令中何处放置辅助函数？

3 个答案: