AngularJS - 在正确的范围内评估指令的选项

Angular 新手在这里。试图让我的头脑围绕指令、范围、嵌入等等。

这就是我想要实现的目标——单元格中的每个表格都需要根据该单元格内的值进行颜色编码(更改 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>

这是怎么回事？

最佳答案

<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:

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

ngScope Documentation Reference
Developer Guide
奖励(来自 angularjs 团队的视频，讨论 angularjs 的最佳实践):
Youtube

关于AngularJS - 在正确的范围内评估指令的选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14453244/