Question

我正在显示角度模板中的网址，但是我想“迷失”它，即替换那些丑陋的字符。现在我只想用'_'替换空格。

这是我在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是bootstraping时，输入值可能未定义（如下所述：https://stackoverflow.com/a/18573426/47633）

我可以用以下方法解决这个令人讨厌的错误消息：

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

Answer 1

在控制器中创建一个功能，例如

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

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

这是一个傻瓜：

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

Answer 2

“然后能够从每个模板中调用它”

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

只需在$rootScope

中使用它即可

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

在app.run();中定义它。因此该函数将定义angular bootstrap

的时间

Answer 3

在你的控制器中，你可以将$ scope绑定到一个函数，使其可以通过html访问。

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

使用角度模板中的自定义函数

3 个答案: