在AngularJS控制器中使用第三方过滤器

Question

I am working on an AngularJS app. I am using underscore.string in my views. For example, I have code that looks like this in my views:

<h3>Welcome { user.firstName | _.str: 'capitalize' }}</h3>

I need to use the capitalize function in the controller that's associated with this view. In an attempt to do that, I have the following:

.controller('MyCtrl', function ($scope, $location, $filter) {
    $scope.user = null;
    $scope.defaultValue = null;

    $scope.initialize = function() {
      $scope.user = getUser();
      $scope.defaultValue = $filter('capitalize')('my value');
    };
    $scope.initialize();
})

Everything works until I try to all the capitalize filter. What am I doing wrong? I get an error that says:

Unknown provider: capitalizeFilterProvider <- capitalizeFilter

I can't figure out what I'm doing wrong. It seems odd that it works fine in my view but now my controller.

Answer 1

register your filter as a dependency in your app

angular.module('app', ['ngRoute','capitalize']);

for more info look at the documentation

EDIT: create the angular filter and use it as a wrapper for the underscore.string library:

angular.module('app', []).filter('capitalize', function() {
  return function(input) {
    return _.str.capitalize(input)
  };
});

in your template:

<h3>Welcome { user.firstName | capitalize }}</h3>