对不同数据使用相同指令

时间:2017-05-10 14:01:34

标签: javascript angularjs angularjs-directive

我对Angular指令有点新,并且想知道是否有多种方法可以多次使用同一个指令但是绑定在不同的数据中? (我确定这是一种我根本不知道的方式!)

例如,我有以下两个表,我想在1指令中进行,只是以不同的方式传递数据:

1.我正在重复一个对象数组,如果kv为isPaint:true,那么我将打印下表..

<tr class="hover"
     ng-repeat="paint in allOptions | orderBy: 'listPrice'"
     ng-if="paint.isPaint"
     ng-click="addRemoveOption(paint)"
     ng-class="{'selected':isSelected(paint)}"
      >
    <td> {{ paint.code }}</td>
    <td> {{ paint.name }}</td>
    <td> {{ paint | includedOption }}</td>
    <td> {{ paint.disclaimer }}</td>
    <td> {{ paint.salesGroup }}</td>
    <td> {{ paint.optionPrev}}</td>
    <td> {{ paint.familyCode }}</td>

</tr>
  1. 我在这里做同样的事情,除了我正在检查修剪..

     <tr class="hover"
       ng-repeat="trim in allOptions | orderBy: 'listPrice'"
       ng-if="trim.isTrim"
       ng-click="addRemoveOption(trim)" 
       ng-class="{'selected':isSelected(trim)}"
      >
        <td> {{ trim.code }}</td>
        <td> {{ trim.name }}</td>
        <td> {{ trim | includedOption }}</td>
        <td> {{ trim.disclaimer }}</td>
        <td> {{ trim.salesGroup }}</td>
        <td> {{ trim.optionPrev }}</td>
        <td> {{ trim.familyCode }}</td>
      </tr>
    
  2. 我只需要从使用该指令的页面访问控制器,这样我就可以访问'allOptions'。我想我可以通过在指令中设置scope:true来做到这一点吗?

    我可以轻松地将ng-repeat名称更改为更一般,然后我只需要将ng-if更改为主要决定因素,如果应在表中打印一个值。所有表格列,数据等都完全相同,我只需要能够分开修剪,颜料,选项等。我发现了一个类似的帖子Use same directive in same view and bind different data但我真的不知道这里发生了什么...

    感谢您的帮助,如果我能提供任何其他信息,请告诉我。

1 个答案:

答案 0 :(得分:1)

重复列表的简单指令:

app.directive('myDirective', function($compile) {
  return {
    restrict: 'E',
    scope: {
      list: '='
    },
    template: '<div ng-repeat="item in list">{{item.name}}</div>',

    replace: true,
    //require: 'ngModel',
    link: function($scope, elem, attr, ctrl) {

    }
  };
});

这是Plunker

这应该让你开始。