AngularJS：将相应的名称绑定到路径

Question

我对AngularJS很新，有些事情对我来说不清楚如何使用这个库。

我正在创建一个多语言网站，我想知道通常会做这样的事情：

<a ng-href='#!/{{ path }}'>{{ nameOfpath }}</a>

未定义nameOfpath的地方。

我最终使用一种服务将所有相应的名称映射到路径，并使用过滤器来获取路径名。所以我可以这样写：

<a ng-href='#!/{{ path }}'>{{ path | linkname }}</a>

我使用的简化代码如下所示：

module.factory('linkService', [function () {
    return function () {
        return {
            'nl': {
                name: 'nl'
            },

            'nl/home': {
                name: 'Home'
            },

            'nl/shop': {
                name: 'Assortiment'
            }
        };
    };
}]).filter('linkName', ['linkService', function (linkService) {
    var links = linkService();
    return function (path) {
        return links[path] ? links[path] : '...';
    }
}]);

我认为这不是正确的方法。

问题：你们会怎么做？

Answer 1

您可以创建一个指令：

app.directive('myHref', function(linkService){
  var links = linkService();
  return {
    link: function(scope,elm,attrs){

      attrs.$observe('myHref', function(path){            
        attrs.$set('href', path);
        elm.text(links[path] || '...' );    
      })

    }
  }
})

并按如下方式使用：

<a my-href='#!/{{ path }}'></a>