Question

假设我想创建一个角度指令，生成如下所示的资源链接：

<a href="http://link/to/resource/1234">link/to/resource/1234</a>

来自一个看似如下的对象：

resource = {
  id: 1234,
  otherProperty: 'foo'
}

如何有效地执行此指令？也就是说，我不想重复'/link/to/resource/{{id}}'的部分。我似乎无法让它正常工作。我尝试过的几件事之一：

app.directive('myResource', function() {
  return {
    restrict: 'E',
    scope: {
      resource: '='
    },
    baseUrl: 'link/to/{{resource.id}}',
    template: '<a href="http://{{baseUrl}}">{{baseUrl}}</a>'
  };
});

最终呈现：

<a href="http://" class="ng-binding"></a>

我尝试过的其他事情（例如将baseUrl作为功能/将其粘贴在scope中）导致类似的事情/错误。

有没有办法让这样的东西起作用？

Answer 1

处理此问题的一种方法是使用指令的链接功能为您设置变量，如下所示：

link: function(scope) {
  scope.baseUrl= 'link/to/'+scope.resource.id;
},
template: '<a href="http://{{baseUrl}}">{{baseUrl}}</a>'

这里是working fiddle

或者你可以使用这种方法：

link: function(scope) {
  scope.baseUrl= 'link/to/';
},
  template: '<a href="http://{{baseUrl}}{{resource.id}}">{{baseUrl}}{{resource.id}}</a>

这里是fiddle

Answer 2

只需编写指令控制器

app.directive('myResource', function() {
  return {
    restrict: 'E',
    scope: {
      resource: '='
    },
    controller: function($scope){
      $scope.getBaseUrl = function(resource){
         return 'link/to/'+resource.Id;
      };
    },
    template: '<a ng-href="http://{{getBaseUrl(resource)}}">{{getBaseUrl(resource)}}</a>'
  };
});

一个函数更有意义，因为你不会管理资源状态的变化。你可能会回答说Id不太可能改变，但在我看来，这是一般的更好的做法。

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

指令的效用函数

2 个答案: