AngularJS : 在来自控制器的指令中注入字符串

Question

有没有办法在指令模板中插入一个 angular 变量作为字符串？例如 {{row.name}}，因此 angular 不会仅在指令中的页面中解释它。像这样：

指令模板：

<div>
   <div ng-transclude ng-repeat="row in data"> 
   </div>
</div>

一个用例：我从控制器向指令发送数据数组。 person.name = "John", person.name = "Mike"。对于这种情况，我的页面看起来像：

....
<div my-directive>
   Name: {{row.name}}
</div>

我从另一个控制器发送数据： car.weight = 13, car.weight = 44 对于这种情况，我的页面看起来像：

....
<div my-directive>
   Weight: {{row.weight}}
</div>

结果将是：姓名：姓名：或者重量：权重：

这是因为 {{row}} 未定义

这可能吗？还是我理解错了，还有另一种方法？

Answer 1

您需要将 row 属性添加到包含范围。这是因为 ng-transclude 指令的范围不是从 my-directive 范围继承的，而是从外部（页面）范围继承的。

一种方法是创建特殊的嵌入指令：

module.directive('myDirectiveTransclude', function() {
  return {
    link: function($scope, elem, attrs, ctrl, $transclude) {
      $transclude(function(dom, transclusionScope) {
        transclusionScope.row = $scope.row;
        return elem.append(dom);
      });
    }
  };
});

然后用它替换ng-transclude：

<div>
    <div my-directive-transclude ng-repeat="row in data"> 
    </div>
</div>

AngularJS : 在来自控制器的指令中注入字符串

AngularJS : Injecting string in directive from controller

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat