Question

我想将格式字符串传递给指令，并使指令使用对象插入它。问题是，如果我使用大括号，Angular会尝试在甚至创建指令之前插入字符串。如果我转义大括号，Angular不显示对象的值（字符串未正确插值）。

如何将格式字符串传递给指令？

这是我的演示代码模板：

<div test-directive item-text="{{ x }} - {{ y }}"></div>

Angular app / directive：

var app = angular.module('plunker', ["test-directive"]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});


var dir = angular.module('test-directive', []);

dir.directive("testDirective", ['$interpolate', function($interpolate) {
  return {

    template: "<div>{{ text }}</div>",

    link: function ($scope, element, attrs) {
      var obj = {
        x: 6,
        y: 9
      };
      $scope.text = $interpolate(attrs.itemText)( obj );
    }
  }
}]);

演示：http://plnkr.co/edit/vUVVuLVBptEmUcv3y7o4?p=preview

编辑：

将@ Lucas的答案应用于我原来的问题并不能解决问题。由于某种原因，attr会被擦除，即使我没有在任何地方擦除它。

请检查第301行：http://plnkr.co/edit/6bjW35D3W1dTGQz9kNSn?p=preview

请注意，itemLabel不会在任何地方更改。

Answer 1

这样做的方法是将其改为

$scope.text = $interpolate(element.attr(attrs.$attr.itemText))( obj );

query and data on overpass turbo

Answer 2

不确定实际用例是什么，但从您的示例来看，您似乎不需要插值（因此您不应该使用它并避免开销）。您（似乎）需要的是在某些上下文中评估表达式（例如obj）。一种方法是使用Scope's $eval() method; e.g：

<div test-directive item-text="x+' - '+y" ...

...
link: function postLink(scope, elem, attrs) {
  var obj = {x: 6, y: 9};
  scope.text = scope.$eval(attrs.itemText, obl);
}

Updated Plnkr

编辑：赞成，这超出了简单的目的，所以这是使用辅助服务替换开始/结束符号和插值的另一种方法：Demo

将格式字符串传递给指令并对其进行插值

2 个答案: