javascript - 如何使指令查找两个参数？

Question

我有两个元素，还有更多像这样的元素:

<chart type="type-one" legend="true"></chart>
<chart type="type-two" legend="true"></chart>

每个元素都应该由放在单独文件中的自己的指令处理。我怎样才能使这些指令查找要处理的元素名称 chart 和 type 属性？

更新: @vittore，感谢您的扩展回答!我的问题是我想要不同类型的图表由来自不同文件的指令处理，导致没有一个巨大的文件来处理 chart 元素，内部函数为每种类型的图表运行，而是负责处理每种图表类型的更多模块化文件。

现在我这样做:

app.directive('chart', function () {
  return {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'ngModel': '=',
      'showGrouped': '='
    },

    link: function (scope, element, attrs, ctrl) {
      if (attrs.type != 'type-one') {return}
      render()
    }
  }
});

所以我检查类型属性，如果它不是某个值，则返回，否则运行相应的渲染代码。我在每个执行特定图表类型呈现的指令文件中都有这段代码。我确信这种方法有问题。

请指教!

Answer 1

使用作用域参数

 angular.module('myModule',[])
        .directive('chart', function() {
           return {
             templateUrl:'chart.html',
             replace:true,
             restrict: 'E',
             scope: {
                type:'=', 
                legend:'='
             }                  
           }
        })

和 chart.html

  <div> {{type}} {{legend}} </div>

更新:

为了使属性真正成为必需的，当提供无效值或根本未提供某些值时，您可以从指令的 link 或 compile 函数中抛出异常.

更新 2:

属性作用域绑定(bind)有3种类型:=、&、@。你应该适本地使用它们。

如果你只想将字符串传递给指令，你可以使用 @ 绑定(bind):

  .directive('chart', function() {
           return {
             templateUrl:'chart.html',
             replace:true,
             restrict: 'E',
             scope: {
                type:'@', 
                legend:'@'
             }                  
           }
        })

这样你的参数将被视为一个字符串:

 scope.type='true'
 scope.legend='type-one'

或者您可能希望将它们绑定(bind)到范围字段:

 <chart type="myModel.type" legend="myModel.legend" />

具有 = 作用域声明:

 .directive('chart', function() {
           return {
             templateUrl:'chart.html',
             replace:true,
             restrict: 'E',
             scope: {
                type:'=', 
                legend:'='
             }                  
           }
        })

将在指令的 scope 属性和父 scope 属性之间创建双向绑定(bind):

  scope.type = $parent.myModel.type
  scope.legend = $parent.myModel.legend

之后，您还可以更改父范围和指令范围内的属性。

最复杂的 & 绑定(bind)，它允许您在父范围内提供带有参数的方法，以便从指令中调用:

  app.directive("chart", function() {
    return {
      scope: {
        details: "&"
      },
      template: '<input type="text" ng-model="value">' +
        '<div class="button" ng-click="details({legend:value})">Show Details</div>'
    }
  })

和标记

  <chart details='showDetails(legend)'></chart> 

有关每种范围绑定(bind)的详细信息，请参阅 egghead.io 的精彩视频:

• Isolate Scope "&"
• Isolate Scope "@"
• Isolate Scope "="