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

Question

这里是 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>

这是怎么回事？

Answer 1

<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