Question

Angular新手在这里。试图绕过指令，范围，转换，以及什么不是。

这就是我想要实现的 - 单元格中的每个表都需要根据该单元格内的值进行颜色编码（bgcolor中的更改或特定CSS类的添加）。复杂的是，单元格没有裸值 - 它有其他位和＆amp;随便小玩意。因此，在单元格中，我希望能够添加自定义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：

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

ngScope Documentation Reference
Developer Guide
奖金（来自angularjs团队的视频，讨论angularjs的最佳实践）：
Youtube

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

1 个答案:

编辑$ parent：