AngularJS - 在正确的范围评估选项指令 [英] AngularJS - Evaluating options to a directive in the correct scope

问题描述

下面角新手。试图总结我的头周围的指令，范围，transclusions，什么不是。

下面就是我试图实现 - 在一个小区中的每个表需要基于细胞内的价值color- codeD（在BGCOLOR或添加特定CSS类的变化）。的复杂性在于，细胞不具有裸值 - 它具有其他比特放大器;与它一起的小玩意。因此，在细胞内，我想有添加自定义HTML的能力。

下面就是我的模板是这样的：

 ＆LT;跨度颜色编成法典={最大：object.max，'值'：object.value}NG-transclude＆GT;
  {{object.value}}
  ＆LT; A HREF =＃＆gt;编辑＆LT; / A＆GT; | ＆所述; A HREF =＃＆GT;删除＆下; / A＆GT;
＆LT; / SPAN＆GT;
 

下面就是我的指令如下：

  myModule.directive（'colorCodify'，函数（）{
  返回{
    限制：'A'，
    transclude：真，
    链接：功能（范围，元素，ATTRS，控制器）{
      选择采用VAR = $范围的eval（attrs.colorCodify）。
      的console.log（选）; //这将显示{最大值：未定义，值：未定义}
    }
  }
}）;
 

令人惊讶的部分是，即使 {{object.value}} 在＆LT;跨度＆GT; 元素渲染正确，它没有被流传下来的指令正确。但是，如果我指的是 $父它工作正常。例如：

 ＆LT;跨度颜色编成法典={最大：$ parent.object.max，价值：$ parent.object.value}NG-transclude＆GT;＆LT; / SPAN＆GT;
 

这是怎么回事？

解决方案

 ＆LT;跨度颜色编成法典={最大：object.max，价值：object.value }NG-transclude＆GT;
  {{object.value}}
  ＆LT; A HREF =＃＆gt;编辑＆LT; / A＆GT; | ＆所述; A HREF =＃＆GT;删除＆下; / A＆GT;
＆LT; / SPAN＆GT;
 

  myModule.directive（'colorCodify'，函数（）{
  返回{
    限制：'A'，
    transclude：真，
    适用范围：{getopts的：＆放大器; colorCodify}，
    链接：功能（范围，元素，ATTRS，控制器）{
      变种选择采用= scope.getOpts（）;
      的console.log（选）;
    }
  }
}）;
 

有关详细信息，在 http://docs.angularjs.org/guide退房指令定义对象的一部分/指令

编辑约$父：

我想你需要阅读更多有关在范围角度是如何工作的（他们如何相互继承和他们如何覆盖这些继承属性）。这将是在angularjs最重要的方面之一。我建议你​​遵循的联系和反复地读，直到你得到它。

ngScope文档参考结果
开发者指南结果
奖金（从angularjs队的视频，讨论angularjs最佳实践）：结果
的Youtube

Angular newbie here. Trying to wrap my head around directives, scopes, transclusions, and what not.

Here's what I'm trying to achieve -- each table in a cell needs to be color-coded (change in bgcolor OR addition of a specific CSS class) based on the value inside that cell. The complication is that the cell does not have a bare value - it has other bits & baubles along with it. Therefore, within the cell, I would like to have the ability to add custom HTML.

Here's what my template looks like:

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

Here's what my directive looks like:

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} 
    }
  }
});

The surprising part is, that even though {{ object.value }} within the <span> element renders correctly, it is not being passed down to the directive properly. However, if I refer to $parent it works properly. Example:

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

What's going on?

解决方案

<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);
    }
  }
});

For more info, check out directive definition object part in http://docs.angularjs.org/guide/directive

Edit about $parent:

I suppose you need to read more about how scopes work in angular (how do they inherit from one another and how do they override those inherited properties). This would be one of the most important aspects in angularjs. I suggest you to follow the links and read them again and again until you get it.

ngScope Documentation Reference
Developer Guide
Bonus (video from angularjs team, discussing angularjs' best practises):
Youtube

这篇关于AngularJS - 在正确的范围评估选项指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！