Angularjs：如何将范围变量传递给指令？答案

【问题标题】：Angularjs: how to pass scope variables to a directive?Angularjs：如何将范围变量传递给指令？
【发布时间】：2013-04-20 10:04:45
【问题描述】：

我正在尝试使用指令创建多个标签并将其附加到<div>，如下所示：

module.directive('createControl', function(){
  return function(scope, element, attrs){    
    console.log(attrs.createControl); // undefined     
  }                                          
});                                         


<div class="control-group" ng-repeat="(k, v) in selectedControls">
  <div create-control="{{ v.type }}"></div>
</div>

在 attrs 我有这个结构：

$$element: b.fn.b.init[1]
$$observers: Object
$attr: Object
createControl: "date"
style: "margin-right: 15px"
__proto__: Object

但是当我尝试使用attrs.createControl 时，我得到undefined，但我不明白为什么。实际问题：如何将作用域变量传递给指令？

【问题讨论】：

标签： javascript angularjs scope directive

【解决方案1】：

阅读directive docs 的属性/观察插值属性部分。在链接阶段，尚未设置属性。

有几种方法，包括使用attrs.$observe 或$timeout。

app.directive('createControl', function($timeout){
 return function(scope, element, attrs){
      attrs.$observe('createControl',function(){
        console.log(' type:',attrs.createControl);
         element.text('Directive text, type is: '+attrs.createControl);
      });
  }
}) ;

DEMO

【讨论】：

【解决方案2】：

    app.directive('createControl', function() {
      return {
        scope: {
          createControl:'='
        },
        link: function(scope, element, attrs){    
           element.text(scope.createControl);    
        }      
      }
    })  

  <div class="control-group" ng-repeat="v in [{type:'green'}, {type:'brown'}]">
    <div create-control="v.type"></div>
   </div>

【讨论】：

不太确定我得到了这个，现在 div 是指令怎么办？
Jackie，Angular 寻找与create-control（连字符小写）属性匹配的指令（camelCase）。
解释，希望对其他人有所帮助： 1.) '@' 将不起作用，无论出于何种原因。 2.) 也可以使用多个变量来应用，例如<create-control val1="v.type" value-two="x.y"></create-control>。请注意，value-two 在指令范围定义 (valueTwo) 中也会变成驼峰式。 3.) 变量周围不能有{{}}（如NO ...="{{v.type}}"）

【解决方案3】：

如果v.type 可能发生变化（即，您确实需要使用插值——{{}}），请使用@charlietfl 或@Joe 的答案，具体取决于您希望指令具有的范围类型。

如果v.type不会改变（即你的链接函数只需要获取一次值，并且这些值保证在你的链接函数运行时被设置），你可以使用$parse或$eval代替.这具有轻微的性能优势，因为没有创建 $watches。（使用 $observe() 和 =，Angular 设置了 $watches，每个摘要周期都会对其进行评估。）

<div create-control="v.type"></div>

app.directive('createControl', function ($parse) {
    return function (scope, element, attrs) {
        console.log('$eval type:', scope.$eval(attrs.createControl));
        var type = $parse(attrs.createControl)(scope);
        console.log('$parse type:', type);
        element.text('Directive text, type is: ' + type);
    }
});

demo

【讨论】：