3

角新手在这里。试图围绕指令、范围、嵌入等等。

这就是我想要实现的目标——单元格中的每个表格都需要根据单元格内的值进行颜色编码（更改 bgcolor 或添加特定的 CSS 类）。复杂之处在于该单元格没有裸值-它还有其他位和小玩意。因此，在单元格内，我希望能够添加自定义 HTML。

这是我的模板的样子：

<span color-codify="{'max' : object.max, 'value' : object.value}" ng-transclude>
  {{ object.value }}
  <a href="#">Edit</a> | <a href="#">Delete</a>
</span>

这是我的指令的样子：

myModule.directive('colorCodify', function() {
  return {
    restrict: 'A',
    transclude: 'true',
    'link' : function(scope, element, attrs, controller) {
      var opts = scope.$eval(attrs.colorCodify);
      console.log(opts); // THIS DISPLAYs {max: undefined, value: undefined} 
    }
  }
});

令人惊讶的部分是，即使{{ object.value }}在<span>元素内正确呈现，它也没有被正确地传递给指令。但是，如果我提到$parent它可以正常工作。例子：

<span color-codify="{'max' : $parent.object.max, 'value' : $parent.object.value}" ng-transclude></span>

这是怎么回事？

4

1 回答 1

4 
<span color-codify="{'max' : object.max, 'value' : object.value}" ng-transclude>
  {{ object.value }}
  <a href="#">Edit</a> | <a href="#">Delete</a>
</span>

.

myModule.directive('colorCodify', function() {
  return {
    restrict: 'A',
    transclude: 'true',
    scope: {getOpts: "&colorCodify"},
    'link' : function(scope, element, attrs, controller) {
      var opts = scope.getOpts();
      console.log(opts);
    }
  }
});

有关更多信息，请查看http://docs.angularjs.org/guide/directive中的指令定义对象部分

关于 $parent 的编辑：

我想您需要阅读更多关于范围如何以角度工作的信息（它们如何相互继承以及它们如何覆盖这些继承的属性）。这将是 angularjs 中最重要的方面之一。我建议您点击链接并一遍又一遍地阅读它们，直到您得到它。

ngScope 文档参考
开发人员指南
奖励（来自 angularjs 团队的视频，讨论 angularjs 的最佳实践）：
Youtube

于 2013-01-22T07:12:03.900 回答