如何使翻译过滤器在指令内的模板属性中工作？

Question

我正在尝试在指令中的template属性中使用translate过滤器。 为此，我使用在线翻译工具https://webtranslateit.com/。

App.Menu.directive("search", function(){    
var instance = {},
id = "searchForm";

instance.template = '<div class="searchTriangle"></div>' +
    '<div ng-controller="SearchController" id="' + id + '">' +
    '<input placeholder="{{\'Search\' | translate}}" type="text" class="search-input" />' +
    '<div class="search-find-button" ng-click="searchText()"> </div> ' +
    '</div>' +
    '<div id="searchButton" ng-click="showSearchBar()">' +
    '</div>';



instance.controller = function ($scope, $element, $attrs, $compile, $state, $window, $timeout) {
    var searchForm = angular.element("#" + id),
        searchTriangle = angular.element(".searchTriangle"),
        searchButton = angular.element("#searchButton");

    instance.template = $timeout( $compile(angular.element(instance.template))($scope), 1000 );

    $scope.showSearchBar = function(){
        if( searchForm.css("display") == "block" ){
            hideSearchForm();
        } else {                
            setTrianglePosition();
            showSearchForm();
        }
    };

    function setTrianglePosition(){
        searchTriangle.css("right", parseInt( searchButton.css("right") ) + 8 + "px" );
    }

    function showSearchForm(){
        searchForm.css("display", "block");
        searchTriangle.css("display", "block");
    }

    function hideSearchForm(){
        searchForm.css("display", "none");
        searchTriangle.css("display", "none");
    }
};

return instance;

});

但是我没有翻译“搜索”字，而是收到以下错误：

    Error: [$interpolate:interr] Can't interpolate: {{'Search' | translate}}
TypeError: Cannot read property 'substr' of null

有人知道它为什么会发生吗？