使用来自 angular 模板的自定义函数

Question

我正在显示来自 angular 模板的网址，但我想 'slugify' 它，即替换那些丑陋的字符。现在我只想用'_'替换空格。

这是我 index.html 文件中的代码

<a ng-href="#/{{url}}">{{name}}</a>

我想像这样定义一个 slugify 函数：

slugify = function(url) {
  return url.replace(' ', '_');
};

然后可以像这样从每个模板调用它

<a ng-href="#/{{slugify(url)}}">{{name}}</a>

如何实现？

-- 编辑

我最终采用了@underscore 解决方案（将其添加到 $rootScope 中）并且在普通控制器中它工作正常。但是从 ng-app 指令中的模板，但没有 ng-controller，它也可以工作，但它多次给我以下错误：

Error: error:interr
Interpolation Error
Can't interpolate: #/{{slug(b.link)}}
TypeError: undefined is not a function

这是违规代码：

<a ng-show='b.link' ng-href="#/{{slug(b.link)}}">{{b.name}}</a>

我尝试使用常规 href 和 ng-href，也尝试使用 $root.slug，但它总是抛出相同的错误十几次，但它工作正常。

也试过定义一个过滤器，就像 Peter 说的那样，但它给了我同样的错误：

Can't interpolate: #/{{b.link | slug}}
TypeError: undefined is not a function

尽管如此，它也工作正常...

--

好的，最终编辑

似乎在 angular 引导时输入值可能未定义（如此处解释：）

我可以通过以下方式解决讨厌的错误消息：

presuApp.filter('slug', function() {
  return function(input) {
    return input ? input.replace(/ /g, '_') : '';
  }
});

Answer 1

"And then being able to call it from every the template like this"

在这种情况下，您应该使用 $rootScope 而不是控制器作用域。

只需在 $rootScope

中使用它

$rootScope.slugify = function(url) {
  return url.replace(' ', '_');
};

在 app.run(); 中定义它。所以函数将定义何时 angular bootstrap

Answer 2

在您的控制器中，您可以将 $scope 绑定到一个函数，以便通过 html.

访问它

$scope.slugify = function(url) {
  return url.replace(' ', '_');
};

Answer 3

在您的控制器中创建一个函数，例如

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.theInput = 'example input';
   $scope.slugify = function(input) {
       input = input.replace(' ', '_');
       return input;
   }
});

这是一个 plunkr:

http://plnkr.co/edit/RARhGQzQoGPtWhoFColL?p=preview

更正确的方法可能是使用过滤器：

app.filter('slugify', function() {
  return function(input) {
    input = input.replace(' ', '_');
    return input
  }
})

并在您输入的模板中：

using a filter:
{{ theInput | slugify }}

还将其添加到 plunkr

使用来自 angular 模板的自定义函数

Use a custom function from an angular template

templates

angularjs