angularjs - 角度辅助函数在哪里？

Question

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

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

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

Answer 1

您可以按照@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 2

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 3

解决此问题的另一种方法是将包含您的辅助函数的 UTIL 对象附加到根范围。这在本教程中捕获

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...

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

Answer 4

我反对将这些实用程序放在全局范围内，这是一种非常糟糕的做法。我认为合理的一种选择是使用 service 来声明这些实用程序，然后根据需要将它们作为依赖项使用。这类似于在不污染全局范围的情况下根据需要导入库。

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 在这里提出的建议： 在 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);

}]);