Question

我正在尝试使用我的指令减少代码重复。我想编写一个生成指令的辅助函数，而不是手动定义它们。将指令定义更改为：

mydirectiveBuilder(function myButton(){
  return {
    scope: {
      toggle: "@pressed"
    }
  };
});

我不知道应该去哪里（除了把它挂在窗外）。角度是否为这些方法提供了一席之地？

Answer 1

Angular不提供任何内容，但使用angular作为其自己的帮助函数的命名空间。你可以简单地做同样的事情：

var myApp = (function() {
    // private function, not visible from the outside
    function privateFunction() {
        ...
    }

    function mydirectiveBuilder() {
       ...
       // you can use privateFunction here
    }

    return {
        mydirectiveBuilder: mydirectiveBuilder;
    };
})();

在你的指令中：

myApp.mydirectiveBuilder(function myButton(){
    return {
        scope: {
            toggle: "@pressed"
        } 
    };
});

Answer 2

您可以执行@JB Nizet建议的操作，或者如果您不喜欢将myApp之类的内容暴露给全局范围，您只需将该函数放在某处，然后将所有内容包装在一个闭包中建立步骤。

文件：directiveHelpers.js

function myDirectiveBuilder(){
}

档案：someDirective.js

myDirectiveBuilder(function myButton(){
    return {
        scope: {
            toggle: "@pressed"
        } 
    };
});

然后作为构建步骤，您将所有文件连接起来，并作为最终构建步骤，在它周围放置一个闭包，因此它基本上变为：

文件：app.js

(function(){

    function myDirectiveBuilder(){
    }

    myDirectiveBuilder(function myButton(){
        return {
            scope: {
                toggle: "@pressed"
            } 
        };
    });
})();

Angular本身在整个代码库中使用了这种技术。

Answer 3

另一种方法是将包含辅助函数的UTIL对象附加到根作用域。这被捕获in this tutorial

angular.module("app", ["ngResource", "ngRoute"]).run(function($rootScope) {

  //app util functions
  $rootScope.UTIL = {

  toFilename: function(filename) {
    return filename
      .toLowerCase()
      .replace(/ /g,'-')
      .replace(/[^\w-]+/g,'');
  },

  fromFilename: function(filename) {
    return filename
      .toLowerCase()
      .replace(/[^\w ]+/g,'')
      .replace(/ +/g,'-');
  }

  //etc more functions here...

 };

}

然后你可以调用辅助函数，如;

$scope.UTIL.toFilename( filename );
$scope.UTIL.fromFilename( filename );
etc...

Snippets归功于AngularJS4U帖子（上面的链接）。

Answer 4

我反对将这些工具放在全球范围内，这是一种非常糟糕的做法。我发现一个合理的选择是使用service来声明这些utils，然后根据需要使用它们作为依赖项。这类似于导入库而不会污染全局范围。

angular.
  module('phonecatApp').
  factory('strHelpers', [
    function () {
      return {
        snippingStr: function(str) {
          return str.substring(1,20) + "...";
        }
      }
  }])

用法：

function usage(strHelpers) {
  console.info("Demonstrating console.log and helper function: " +
    strHelpers.snippingStr("111111111122222222223333333333"));
}

这是Matt Way在这里建议的： Where is a good place to put a few small utility functions in AngularJS?

Answer 5

这是一个简单，紧凑且易于理解的方法首先，在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);

}]);

角辅助函数在哪里？

5 个答案: